JavaScript hiddenの値を取得/設定するサンプル

JavaScriptのhiddenの値を取得/設定するサンプルです。

確認環境
・Windows10
・Google Chrome/IE11

目次

hiddenの値を取得する(フォームとname)

hiddenの値を取得するサンプルです。
フォーム(form)とhiddenのnameを使用するやり方です。

コード

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

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

<script>
function clickBtn1(){
	// 値を取得
	const a = document.form1.hidden1.value;

	document.getElementById("span1").textContent = a;
}
function clickBtn2(){
	document.getElementById("span1").textContent = "";
}
</script>

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

hiddenに値を設定する(フォームとname)

hiddenに値を設定するサンプルです。
フォーム(form)とhiddenのnameを使用するやり方です。

コード

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

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

<script>
function clickBtn3(){
	// 値を設定
	document.form2.hidden2.value = "blue";

	document.getElementById("span2").textContent 
		= document.form2.hidden2.value;
}
function clickBtn4(){
	document.form2.hidden2.value= ""; //クリア
	document.getElementById("span2").textContent = "";
}
</script>

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

hiddenの値を取得する(getElementByIdメソッド)

hiddenの値を取得するサンプルです。
getElementByIdメソッドを使用するやり方です。フォーム(form)がなくても取得できます。

コード

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

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

<script>
function clickBtn5(){
	// 値を取得
	const a = document.getElementById("hidden3").value;

	document.getElementById("span3").textContent = a;
}
function clickBtn6(){
	document.getElementById("span3").textContent = "";
}
</script>

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

hiddenに値を設定する(getElementByIdメソッド)

hiddenに値を設定するサンプルです。
getElementByIdメソッドを使用するやり方です。フォーム(form)がなくても設定できます。

コード

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

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

<script>
function clickBtn7(){
	// 値を設定
	document.getElementById("hidden4").value = "green";

	document.getElementById("span4").textContent 
		= document.getElementById("hidden4").value;
}
function clickBtn8(){
	document.getElementById("hidden4").value = ""; //クリア
	document.getElementById("span4").textContent = "";
}
</script>

2行目は、hiddenです。
9行目は、getElementByIdメソッドでID「hidden3」を指定して対象を特定(2行目)しvalue値に値をセットしています。
11行目は、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の値がカンマ区切りで入っています。
9行目は、hiddenの値を取得しています。
11行目は、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>

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

関連の記事

JavaScript ラジオボタンの値を取得/設定するサンプル
JavaScript セレクトボックスの値を取得/設定するサンプル
JavaScript チェックボックスの値を取得/設定するサンプル
JavaScript テキストボックスの値を取得/設定する
JavaScript テキストエリアの値を取得/設定するサンプル
jQuery hiddenの値を取得/設定する

△上に戻る