隠しデータフィールド(input type=”hidden”)を設置する

フォームのinput要素の隠しデータフィールドはWebブラウザの画面には表示されないので、ユーザーはフィールドの入力も値の確認もできないHTMLフォーム項目です。

フォームが送信されると隠しデータフィールドの値も一緒に送信されます。

この記事では隠しデータフィールドの使い方やjavascript(jQuery)を使って、隠しデータフィールドの値を取得・セットなどの操作方法をご紹介します。

フォームで隠しデータフィールドの用途

隠しデータフィールドは表示されないので、ユーザーが入力することも値を確認することもできません。

そのため、隠しデータフィールドではユーザーが入力・確認する必要はないが、フォーム送信後のデータ処理で必要なデータを隠しデータフィールドに持たせます。

具体的には以下のような使用例があります。

フォームで隠しデータフィールドの使い方

inputのtype属性をhiddenにすると隠しデータフィールドとなります。

隠しデータフィールドのvalueに値を入れても次のように表示されないので、ユーザーは確認することも入力することもできません。

<form method=“POST” ...>
  <input type="hidden" name="id" value="1">
  <input type="submit">
<form>

隠しデータフィールドはユーザーが操作するフィールドではないので、required属性を使うことはできません。

<form method=“POST” ...>
  <!-- required属性は挙動しない -->
  <input type="hidden" name="id" value="" required>
  <input type="submit">
<form>

隠しデータフィールドの値をサーバーで受け取る

隠しデータフィールドにname属性とvalue属性を指定することで、フォーム送信後にサーバーで隠しデータフィールドの値を受け取ることができます。

サーバー側での隠しデータフィールドの値の受け取り方はテキストボックスなどと同じように受け取ることができます。

PHPでは次のように受け取ることができます。

$id = $_POST['id'];
// 1

Laravelでは次のように受け取ることができます。

$id = $request->get('id');
// 1

隠しデータフィールドで複数の要素を配列で送信

隠しデータフィールドで複数の値を同じnameで送信することができます。

サーバーで受け取るときは配列で受け取ることができます。

<form method=“POST” ...>
  <input type="hidden" name="ids[]" value="1">
  <input type="hidden" name="ids[]" value="2">
  <input type="hidden" name="ids[]" value="3">
  ...
<form>

// phpで受け取る
$ids = $_POST['id[]'];
// ["1", "2", "3"]

// Laravelで受け取る
$ids = $request->get('id[]');
// ["1", "2", "3"]

また、配列の順序を指定したり、連想配列にしてサーバーで受け取ることもできます。

<!-- 配列の順序を指定 -->
<form method=“POST” ...>
  <input type="hidden" name="ids[0]" value="1">
  <input type="hidden" name="ids[1]" value="2">
  <input type="hidden" name="ids[2]" value="3">
  ...
<form>

<!-- 連想配列 -->
<form method=“POST” ...>
  <input type="hidden" name="ids[product_1]" value="1">
  <input type="hidden" name="ids[product_2]" value="2">
  <input type="hidden" name="ids[product_3]" value="3">
  ...
<form>

formのinput valueを配列で受け取りたい場合のname属性ではinputのname属性によってサーバーで受け取れるデータがどのように違うか詳しく説明しています。

ファイルをアップロードするフィールドを非表示にする

ファイルアップロードのフィールドを作るにはinputのtype属性にfileを指定します。
しかし、よくテキストやボタンでファイルアップロードをするフィールドがあります。

これはファイルアップロードのフィールドのtype属性をhiddenにしているのではなく、CSSによってファイルアップロードのフィールドを消しています。

具体的には次のようなコードによってボタンやテキストでファイルをアップロードしています。

<form method=“POST” ...>
  <input id="inputImage" type="file" name="image" value="" style="display: none;">
  <label for="inputImage">
    アップロードファイル選択
  </label>
  <input type="submit">
<form>

javascriptを使ってフォームで隠しデータフィールドを操作する

隠しデータフィールドはjavascriptで値を取得したりセットしたりすることができます。

データの取得をしやすくするために隠しデータフィールドにidを付与します。

<form id="product-form" method=“POST” ...>
  <input id="product_id" type="hidden" name="product_id" value="1">
  <input type="submit">
<form>

隠しデータフィールドの値の取得

javascriptでデータを取得する場合は次のように取得します。
テキストフィールドの値を取得するときと変わりません。

var product_id = document.getElementById("product_id").value;
// 1

jQueryで取得する場合は次のように取得します。

var product_id = $('#product_id').val();
// 1

または次のように要素と属性を指定して値を取得することもできます。

var product_id = $('input:hidden[name=product_id]').val();
// 1

隠しデータフィールドの値をセットする

javascriptで隠しデータフィールドの値をセットするときは次のようにします。
テキストフィールドの値を取得するときと変わりません。

var obj = document.getElementById("product_id")
obj.value = 2;

jQueryで値をセットする場合は次のようにセットします。

$('#product_id').val('2');

または次のように要素と属性を指定して値をセットすることもできます。

$('input:hidden[name=product_id]').val('2');

隠しデータフィールドを追加する

隠しデータフィールドを追加する場合は次のように追加することができます。

$('#product-form').insertAdjacentHTML('afterbegin','<input type="hidden" name="editor" value="5">');

隠しデータフィールドの値を配列で送信したい場合は、次のようにname属性を次のように変更すると配列で送る要素を追加することができます。

$('#product-form').insertAdjacentHTML('afterbegin','<input type="hidden" name="tagIds[]" value="3">');
$('#product-form').insertAdjacentHTML('afterbegin','<input type="hidden" name="tagIds[]" value="4">');
$('#product-form').insertAdjacentHTML('afterbegin','<input type="hidden" name="tagIds[]" value="5">');

まとめ

隠しデータフィールドは表示されないので、隠しデータフィールドではユーザーが入力・確認する必要はないが、フォーム送信後のデータ処理で必要なデータを隠しデータフィールドに持たせます。

この隠しデータフィールドは次のような使用例があります。

inputのtype属性をhiddenにすると隠しデータフィールドとなります。

隠しデータフィールドのvalueに値を入れても次のように表示されないので、ユーザーは確認することも入力することもできません。

<form method=“POST” ...>
  <input type="hidden" name="id" value="1">
  <input type="submit">
<form>