【超便利】jQueryで隠されたinput値をカンタン操作！サンプルコードでわかりやすく解説

2024-06-09

jQueryを使って隠された入力フィールドの値にアクセスする方法

方法1：IDを使ってアクセスする

隠された入力フィールドにIDが設定されている場合は、$('#ID') セレクターを使ってその要素を取得し、val() メソッドを使って値を取得できます。

<input type="hidden" id="hiddenField" value="initialValue">

<script>
  var hiddenFieldValue = $('#hiddenField').val();
  console.log(hiddenFieldValue); // "initialValue" が出力されます
</script>

<input type="hidden" name="hiddenField" value="initialValue">

<script>
  var hiddenFieldValue = $('input[name="hiddenField"]').val();
  console.log(hiddenFieldValue); // "initialValue" が出力されます
</script>

補足

複数の隠された入力フィールドがある場合は、$('input[type="hidden"]') セレクターを使ってすべての要素を取得し、それぞれに対して val() メソッドを実行できます。
隠された入力フィールドの値を設定するには、val() メソッドに新しい値を渡します。

<input type="hidden" id="hiddenField" value="initialValue">

<script>
  $('#hiddenField').val('newValue');
</script>

jQueryを使って隠された入力フィールドの値にアクセスする：サンプルコード

HTML

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Hidden Input Access</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <input type="hidden" id="hiddenField" value="initialValue">

  <button id="getValueButton">Get Value</button>
  <button id="setValueButton">Set Value</button>

  <script>
    $(document).ready(function() {
      $('#getValueButton').click(function() {
        var hiddenFieldValue = $('#hiddenField').val();
        alert('Hidden field value: ' + hiddenFieldValue);
      });

      $('#setValueButton').click(function() {
        $('#hiddenField').val('newValue');
        alert('Hidden field value updated to "newValue"');
      });
    });
  </script>
</body>
</html>

説明

HTML部分では、hiddenField というIDを持つ隠された入力フィールドを作成します。
getValueButton と setValueButton という2つのボタンを作成します。
script タグ内で、jQueryを使って以下の処理を行います。
- document.ready イベントハンドラを使って、ページが読み込まれたときに実行される処理を定義します。
- getValueButton がクリックされたときに、$('#hiddenField').val() を使って隠された入力フィールドの現在の値を取得し、アラートボックスで表示します。

このサンプルコードを参考に、自分のニーズに合わせてコードをカスタマイズすることができます。

このサンプルコードでは、jQuery 3.6.0 を使用しています。古いバージョンの jQuery を使用している場合は、バージョンに対応したコードに変更する必要があります。
このサンプルコードは、基本的な例です。より複雑なシナリオでは、追加の処理が必要になる場合があります。

jQueryを使って隠された入力フィールドの値にアクセスする：その他の方法

方法3：属性セレクターを使う

<input type="hidden" data-hidden-field="true" value="initialValue">

<script>
  var hiddenFieldValue = $('input[data-hidden-field="true"]').val();
  console.log(hiddenFieldValue); // "initialValue" が出力されます
</script>

方法4：親要素から検索する

<div id="parentContainer">
  <input type="hidden" id="hiddenField" value="initialValue">
</div>

<script>
  var hiddenFieldValue = $('#parentContainer #hiddenField').val();
  console.log(hiddenFieldValue); // "initialValue" が出力されます
</script>

方法5：jQueryのfilter() メソッドを使う

$('input[type="hidden"]') セレクターで取得した要素の集合に対して、filter() メソッドを使って特定の条件に合致する要素のみを抽出することができます。

<input type="hidden" id="hiddenField1" value="initialValue1">
<input type="hidden" id="hiddenField2" value="initialValue2">

<script>
  var hiddenFieldValue = $('input[type="hidden"]').filter(function() {
    return $(this).attr('id') === 'hiddenField2';
  }).val();
  console.log(hiddenFieldValue); // "initialValue2" が出力されます
</script>