フォームなどのname属性を取得するdocument.getElementsByName('');

[説明]

HTML文章のformの各要素にはname属性をつけてvalue要素を取得している。
このname属性にアクセスする手段がdocument.getElementsByName('');である。
一方、radioやselectではform中、複数箇所にnameが登場するものであるからname属性はid属性とは異なり同じ名前のものが複数用いられる(例えばradioやselect)ことから、そのvalueやlengthを取得するには上から数えて何番目のものにアクセスするのかを指定してやる必要がある。
何番目かを指定するには、document.getElementsByName('').item( i ); であり、
そのタグについているvalueを指定する場合はdocument.getElementsByName('').item( i ).value; である。
変数に格納した場合などには、
var AAA = document.getElementsByName('BBB');
AAA[0].value = "";と表記しても同じ意味である。
またその数を調べるには、document.getElementsByName('').length; である。

[サンプル]

[実行結果]

<form>
	<input type="radio" name="gender" value="male" />男性
	<input type="radio" name="gender" value="female" />女性
	<input type="button" id="btn" value="Name取得" />
</form>

<script type="text/JavaScript">
var nameGet = document.getElementById('btn'); // id="btn"を取得

var result = document.getElementById('koko'); // id="koko"を取得

nameGet.onclick = function(){
	var nodelist = document.getElementsByName('gender');

	str = ""; // 空の文字列を用意

	for(var i = 0 ; i < nodelist.length ; i++){
		str += nodelist.item( i ).value + "\n"; // 空の文字列にnodelist.item(i).valueと改行を要素の数だけ代入
		} // End for

		result.innerHTML = str;
} // End nameGet
</script>

document.getElementsByName('gender').item( i ).length
document.getElementsByName('gender').item( i ).value

詳しくはこちら。

またこれを使った「入力必須項目の作り方」はこちら。

インデックスにもどる