hiddenオブジェクト

hiddenオブジェクトは隠しテキストボックスの情報を提供したり、隠しテキストボックスの設定や操作を行うオブジェクトです。

隠しテキストボックスの値を取得する方法

隠しテキストボックスの値を取得する方法は、フォーム内のinputタグのname属性に名前を指定することにより以下の構文で隠しテキストボックスの値を取得することが可能となります。


    document.フォーム名.隠しテキストボックス名.value
					

以下のサンプルではフォームのname属性を指定して、隠しテキストボックスの内容を表示しています。


<html>
<head>
<title>JavaScript hidden</title>
<script>
function dispHidden(){

	var hd  = document.fm.hidden1.value;
	alert('入力した値は「' + hd + '」です' );

}
</script>
</head>
<body>
<form name="fm">
フォーム内の隠しテキストボックスの値を表示<br>
<input type="hidden" name="hidden1" value="隠しテキストボックス1">
<input type="button" value="確認" onclick="dispHidden()">
</form>
</body>
</html>					
					

前述の方法以外にelements配列を使用してindex番号を指定することにより取得する方法もあります。index番号はフォーム内の各要素の宣言順に0から順番に割り当てられます。

なお、フォーム内の要素数はlengthプロパティにより取得できるので、lengthプロパティにより数を取得してfor文を使用して順次取得します。


    document.フォーム名.elements[index番号].value
					

以下のサンプルではelements配列を使用して隠しテキストボックスの内容を表示しています。


<html>
<head>
<title>JavaScript hidden</title>
<script> 
function dispHidden(){
 
	var f = document.fm;
 
	for(var i = 0 ; i < f.elements.length ; i++){
		if(f.elements[i].type=='hidden'){
			alert(i + '番目の値は' + f.elements[i].value + 'です' );
		}
	}	
 
}
</script>
</head>
<body>
<form name="fm">
フォーム内の隠しテキストボックスの入力値を表示<br>
<input type="hidden" name="hdFuit1" value="りんご">
<input type="hidden" name="hdFuit2" value="みかん">
<input type="hidden" name="hdFuit3" value="ぶどう">
<input type="hidden" name="hdFuit4" value="パイナップル">
<input type="hidden" name="hdFuit5" value="バナナ">
<input type="button" value="確認" onclick="dispHidden()">
</form>
</body>
</html>				
					

プロパティの設定方法


    document.フォーム名.隠しテキストボックス名.property
    document.フォーム名.elements[index番号].property
					

以下はhiddenオブジェクトのプロパティの一覧です。

プロパティ名内容
nameオブジェクト名
valueオブジェクト内の値
typeオブジェクトのタイプ

メッソッドの設定方法


    document.フォーム名.隠しテキストボックス名.method()
    document.フォーム名.elements[index番号].method()
					

以下はhiddenオブジェクトのメソッドの一覧です。

メソッド名内容
toString()オブジェクトを文字列に変える
valueOf()オブジェクトの値を返す
handeleEvent()イベント取扱者を特定する
toSource()オブジェクトの値を文字列で返す
関連メンバ内容
Textテキストボックス
Textareaテキストエリア
Select選択・リストボックス
Checkboxチェックボックス
Radioラジオボタン
Buttomボタン
Submit送信ボタン
Resetリセットボタン
Passwordパスワード入力ボックス
Fileファイル選択ボックス