フォームデータへのアクセス
フォームデータへのアクセス
JavaScriptでフォームデータにアクセスするには二つの方法がある。
- document.forms['フォーム名'].elements['エレメント名'].valueなどForm要素群のname属性値を用いる
- document.getElementById('ID属性値').valueなど汎用のDOMを用いる
基本的にはどちらを用いても構わない。
汎用DOMを用いるときにはID属性とname属性の特性の違いに注意(ID属性はユニークな一つの値、name属性は複数の値-配列-となる)。
1行テキスト
- Form要素群のname属性値を用いる
- document.forms['form要素のname属性'].elements['input要素のname属性'].value;
- 汎用DOMを用いる
- document.getElementById('input要素のid属性').value;
<form name="form_name">
お名前<input type="text" name="name" id="name">
</form>
//Form要素群のname属性値を用いてアクセス
name = document.forms['form_name'].elements['name'].value;
//汎用DOMを用いてアクセス
name = document.getElementById('name').value;
ラジオボタン
- Form要素群のname属性値を用いる
-
- document.forms['form要素のname属性'].elements['input要素のname属性'][配列番号].checked;
- document.forms['form要素のname属性'].elements['input要素のname属性'][配列番号].value;
- 汎用DOMを用いる
-
- document.getElementsByName('input要素のname属性')[配列番号].checked;
- document.getElementsByName('input要素のname属性')[配列番号].value;
- document.getElementById('input要素のid属性').checked;
- document.getElementById('input要素のid属性').value;
<form name="form_name">
<input type="radio" name="sex" id="female" value="女"><label for="female">女</label>
<input type="radio" name="sex" id="male" value="男"><label for="male">男</label>
</form>
//Form要素群のname属性値を用いてアクセス
var sex_elements = document.forms['form_name'].elements['sex'];
for(var i = 0; i < sex_elements.length; i++){
if(sex_elements[i].checked){
sex = sex_elements[i].value;
break;
}
}
//汎用DOMでname属性値を用いてアクセス
var sex_elements = document.getElementsByName('sex');
for(var i = 0; i < sex_elements.length; i++){
if(sex_elements[i].checked){
sex = sex_elements[i].value;
break;
}
}
//汎用DOMでid属性値を用いてアクセス
if(document.getElementById('male').checked){
sex = document.getElementById('male').value;
}else if(document.getElementById('female').checked){
sex = document.getElementById('female').value;
}
チェックボックス
- Form要素群のname属性値を用いる
-
- document.forms['form要素のname属性'].elements['input要素のname属性'][配列番号].checked;
- document.forms['form要素のname属性'].elements['input要素のname属性'][配列番号].value;
- 汎用DOMを用いる
-
- document.getElementsByName('input要素のname属性')[配列番号].checked;
- document.getElementsByName('input要素のname属性')[配列番号].value;
- document.getElementById('input要素のid属性').checked;
- document.getElementById('input要素のid属性').value;
<form name="form_name">
<input type="checkbox" name="hobby" id="books" value="読書">読書
<input type="checkbox" name="hobby" id="music" value="音楽鑑賞">音楽鑑賞
</form>
//Form要素群のname属性値を用いてアクセス
var hobby_elements = document.forms['form_name'].elements['hobby'];
for(var i = 0; i < hobby_elements.length; i++){
if(hobby_elements[i].checked){
hobbies += hobby_elements[i].value;
}
}
//汎用DOMでname属性値を用いてアクセス
var hobby_elements = document.getElementsByName('hobby');
for(var i = 0; i < hobby_elements.length; i++){
if(hobby_elements[i].checked){
hobbies += hobby_elements[i].value;
}
}
//汎用DOMでid属性値を用いてアクセス
if(document.getElementById('books').checked){
hobbies = document.getElementById('books').value;
}if(document.getElementById('music').checked){
hobbies += document.getElementById('music').value;
}
セレクトボックス
- Form要素群のname属性値を用いる
- document.forms['form要素のname属性'].elements['select要素のname属性'].value;
- 汎用DOMを用いる
- document.getElementById('select要素のid属性').value;
<form name="form_name">
<select name="blood" id="blood" size="1">
<option value="A">A</option>
<option value="B">B</option>
<option value="O">O</option>
<option value="AB">AB</option>
</select>
</form>
//Form要素群のname属性値を用いてアクセス
blood = document.forms['form_name'].elements['blood'].value;
//汎用DOMを用いてアクセス
blood = document.getElementById('blood').value;
テキストエリア
- Form要素群のname属性値を用いる
- document.forms['form要素のname属性'].elements['textarea要素のname属性'].value;
- 汎用DOMを用いる
- document.getElementById('textarea要素のid属性').value;
<form name="form_name">
<textarea id="comment" name="comment"></textarea>
</form>
//Form要素群のname属性値を用いてアクセス
comment = document.forms['form_name'].elements['comment'].value;
//汎用DOMを用いてアクセス
comment = document.getElementById('comment').value;