JavaScript hiddenの値を取得/設定する

サンプル	hiddenとは
	hiddenの値を取得する
	hiddenに値を設定する
	hiddenのカンマ区切りのデータを配列にする
	配列をカンマ区切りでhiddenにセットする

hiddenとは

以下はhtmlのhiddenのコードです。

<input type="hidden" value="" id="hid" />

画面には表示せずに値を保持することができます。※コードを見ると表示されます(画面を右クリックからページのソースをクリック等)。

inputタグでtypeにhiddenを指定します。

値はJavaScriptで取得できます。

hiddenの値を取得する

ボタンを押すとhiddenの値を取得して画面に表示するサンプルです。

色

上記サンプルのコードです。

<p>色 <span id="span3"></span></p>
<input type="hidden" value="red" id="hidden3" />
<input type="button" value="ボタン" onclick="clickBtn5()" />

<script>
  function clickBtn5() {
    const a = document.getElementById("hidden3").value;
    document.getElementById("span3").textContent = a;
  }
</script>

2行目は、hiddenです。
7行目は、getElementByIdメソッドでID「hidden3」を指定して対象を特定(2行目)しvalue値を取得しています。
8行目は、value値を画面に表示しています。

getElementByIdを使用しない場合

getElementByIdを使用しない場合は、フォームとnameを指定します。

<p>色 <span id="span1"></span></p>
<form name="form1">
  <input type="hidden" name="hidden1" value="red" />
</form>
<input type="button" value="ボタン" onclick="clickBtn1()" />

<script>
  function clickBtn1() {
    const a = document.form1.hidden1.value;
    document.getElementById("span1").textContent = a;
  }
</script>

9行目は、フォームのname「form1」とhiddenのname「hidden1」で対象を特定(3行目)しvalueの値を取得しています。

hiddenに値を設定する

ボタンを押すとhiddenに値を設定+画面に表示するサンプルです。

色

上記サンプルのコードです。

<p>色 <span id="span4"></span></p>
<input type="hidden" value="red" id="hidden4" />
<input type="button" value="ボタン" onclick="clickBtn7()" />

<script>
  function clickBtn7() {
    document.getElementById("hidden4").value = "green";
    document.getElementById("span4").textContent 
      = document.getElementById("hidden4").value;
  }
</script>

2行目は、hiddenです。
7行目は、getElementByIdメソッドでID「hidden4」を指定して対象を特定(2行目)しvalue値に値をセットしています。
8,9行目は、value値を画面に表示しています。

getElementByIdを使用しない場合

getElementByIdを使用しない場合は、フォームとnameを指定します。

<p>色 <span id="span2"></span></p>
<form name="form2">
  <input type="hidden" name="hidden2" value="" />
</form>
<input type="button" value="ボタン2" onclick="clickBtn3()" />

<script>
  function clickBtn3() {
    document.form2.hidden2.value = "blue";
    document.getElementById("span2").textContent 
      = document.form2.hidden2.value;
  }
</script>

9行目は、2行目のフォームのname「form2」とhiddenのname「hidden2」で対象を特定(3行目)しvalueに値を設定しています。

hiddenのカンマ区切りのデータを配列にする

hiddenのカンマ区切りのデータを配列にするサンプルです。

<form name="form1">
  <input type="hidden" name="hidden1" value="赤,黄,青" />
</form>
<input type="button" value="ボタン1" onclick="clickBtn1()" />

<script>
  function clickBtn1() {
    const hidden1 = document.form1.hidden1.value;
    const a = hidden1.split(",");
    console.log(a); // ["赤", "黄", "青"] 配列
  }
</script>

2行目は、hiddenの値がカンマ区切りで入っています。
8行目は、hiddenの値を取得しています。
9行目は、splitメソッドで配列にしています。

配列をカンマ区切りでhiddenにセットする

配列をカンマ区切りでhiddenにセットするサンプルです。

<form name="form1">
  <input type="hidden" name="hidden1" value="" />
</form>
<input type="button" value="ボタン1" onclick="clickBtn1()" />

<script>
  function clickBtn1() {
    const a = ["赤", "黄", "青"];
    document.form1.hidden1.value = a;
    console.log(document.form1.hidden1.value); //赤,黄,青
  }
</script>

8行目は、配列です。
9行目は、配列をhiddenにセットしています。カンマ区切りでセットされます。
10行目は、hiddenの値を確認しています。