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

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

目次

formの名称を指定して値を取得/設定する

formの名称を指定して値を取得/設定するサンプルです。
4行目は、フォームのname「form1」とhiddenのname「color1」で対象を特定(18行目)しvalueに値を設定しています。
7行目は、フォームのname「form1」とhiddenのname「color1」で対象を特定(18行目)しvalue値を取得しています。

<script>
function btn1_click(){
	// 値を設定
	document.form1.color1.value="blue";

	// 値を取得
	var str = document.form1.color1.value;
	document.getElementById("sp1").innerHTML = str; //blue
}
function btn2_click(){
	document.form1.color1.value=""; //クリア
	var str = document.form1.color1.value;
	document.getElementById("sp1").innerHTML = str;
}
</script>
<p>色 <span id="sp1"></span></p>
<form name="form1">
<input type="hidden" name="color1" value="red">
</form>
<input type="button" value="ボタン1" onclick="btn1_click()"/>
<input type="button" value="クリア" onclick="btn2_click()"/>

サンプル

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

getElementByIdメソッドを使用して値を取得/設定する

getElementByIdメソッドを使用して値を取得/設定するサンプルです。
4行目は、getElementByIdメソッドでID「hidden1」を指定して対象を特定(18行目)しvalueに値を設定しています。
7行目は、getElementByIdメソッドでID「hidden1」を指定して対象を特定(18行目)しvalue値を取得しています。

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

	// 値を取得
	var str = document.getElementById("hidden1").value
	document.getElementById("sp2").innerHTML = str; //green
}
function btn4_click(){
	document.getElementById("hidden1").value = ""; //クリア
	var str = document.getElementById("hidden1").value
	document.getElementById("sp2").innerHTML = str;
}
</script>
<p>色 <span id="sp2"></span></p>

<input type="hidden" name="color2" value="red" id="hidden1">

<input type="button" value="ボタン2" onclick="btn3_click()"/>
<input type="button" value="クリア" onclick="btn4_click()"/>

サンプル

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

関連の記事

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



△上に戻る