JavaScript講座

フォームデータへのアクセス

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;

radio.html

<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;

checkbox.html

<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;

select.html

<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;

textarea.html

<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;