11.フォームエレメントのイベント処理
フォームエレメントへのアクセス方法には以下のようなものがあります。
1)フォームのオブジェクト配列を使う方法
フォームのオブジェクト配列「forms[]」と「elements[]」を使ってフォームエレメントにアクセスすることができます。
forms[]は、<form>~</form>を一つのオブジェクト配列として扱います。
たとえば、
<form name="a">
|
|
</form>
<form name="b">
|
|
</form>
のように二つのフォームがあった場合は、
forms[0]は、上のフォームがオブジェクト配列になります。
forms[1]は、下のフォームがオブジェクト配列になります。
一つのフォームの中のエレメントは、以下のように上から順にオブジェクト配列に格納されます。
<form name="c">
<input type="text" name="d" id="d"> ← elements[0]に格納されます。
<input type="text" name="e" id="e"> ← elements[1]に格納されます。
<input type="submit" name="f" id="f" value="f"> ← element[2]に格納されます。
</form>
上記プログラムでテキストフィールド(name="d")の「value」属性を書きかえるには、以下のようにします。
document.forms[0].elements[0].value="テキストフィールド";
連想配列で指定することもできます。
document.forms["c"].elements["d"].value="テキストフィールド";
上記プログラムでテキストフィールド(name="f")の「value」属性を書きかえるには、以下のようにします。
document.forms[0].elements[2].value="クリックしてね!";
連想配列で指定することもできます。
document.forms["c"].elements["f"].value="クリックしてね!";
2)「name」属性名をオブジェクトとしてアクセスする方法
フォームエレメントにアクセスする方法として、以下のように「name」属性名をオブジェクトとして
アクセスすることができます。
<form name="c">
<input type="text" name="d" id="d">
<input type="text" name="e" id="e">
<input type="submit" name="f" id="f" value="f">
</form>
document.c.d.value="テキストフィールド"; ← テキストフィールド「name="d"」の「value」属性を変更しています。
document.c.f.value="クリックしてね!"; ← ボタン「name="f"」の「value」属性を変更しています。
3)多次元配列でアクセスする方法
フォームエレメントにアクセスする方法として、以下のように多次元配列でオブジェクトに
アクセスすることができます。
<form name="c">
<input type="text" name="d" id="d">
<input type="text" name="e" id="e">
<input type="submit" name="f" id="f" value="f">
</form>
document.forms["c"]["d"].value="テキストフィールド"; ← テキストフィールド「name="d"」の「value」属性を変更しています。
document.forms["c"]["f"].value="クリックしたな!";
← ボタン「name="f"」の「value」属性を変更しています。
document.forms[0][0].value="テキストフィールド"; ← テキストフィールド「name="d"」の「value」属性を変更しています。
document.forms[0][2].value="クリックしたな!"; ← ボタン「name="f"」の「value」属性を変更しています。
4)「id」属性や「name」属性を持つエレメントをオブジェクトとしてアクセスする方法
getElementById(),getElementsByName()を使って、それぞれのエレメントをオブジェクト化してアクセスします。
<form name="c">
<input type="text" name="d" id="d">
<input type="text" name="e" id="e">
<input type="submit" name="f" id="f" value="f">
</form>
var element1=document.getElementById("d"); ←テキストフィールド「id="d"」をオブジェクト化しています。
element1.value="テキストフィールド"; ← テキストフィールド「id="d"」の「value」属性を変更しています。
var element2=document.getElementsByName("f"); ←ボタン「name="f"」をオブジェクト化しています。
element2[0].value="クリックしたな!"; ← ボタン「name="d"」の「value」属性を変更しています。
<サンプル>
ファイル名:js11-1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">ファイル名:js11-1.js
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>フォームエレメントにアクセスする方法</title>
<script type="text/javascript" src="js11-1.js"></script>
</head>
<body>
フォームエレメントにアクセスする方法<br />
<form id="formId" name="formName">
氏名:<input type="text" name="tfName1" id="tfId1"><br>
住所:<input type="text" name="tfName2" id="tfId2"><br>
E-Mail:<input type="text" name="tfName3" id="tfId3"><br>
性別:<input type="radio" value="男" name="rdName" id="rdId1">男
<input type="radio" value="女" name="rdName" id="rdId2">女<br>
貴方の趣味は:<input type="checkbox" valu="パソコン" name="cbName1" id="cbId1">パソコン
<input type="checkbox" valu="ドライブ" name="cbName2" id="cbId2">ドライブ<br>
貴方の出身地は:<select name="selName1" id="selId1">
<option value="大阪府" name="osakaName" id="osakaId">大阪府</option>
<option value="京都府" name="kyotoName" id="kyotoId">京都府</option>
<option value="奈良県" name="naraName" id="naraId">奈良県</option>
<option value="滋賀県" name="shigaName" id="shigaId">滋賀県</option>
<option value="兵庫県" name="hyogoName" id="hyogoId">兵庫県</option>
<option value="和歌山県" name="wakayamaName" id="wakayamaId">和歌山県</option>
</select><br />
貴方のアイテムは:<select name="selName2" id="selId2" multiple>
<option value="携帯電話" name="keitaiName" id="keitaiId">携帯電話</option>
<option value="iPhone" name="iPhoneName" id="iPhoneId">iPhone</option>
<option value="Android" name="androidName" id="androidId">Android</option>
<option value="iPad" name="iPadName" id="iPadId">iPad</option>
<option value="iPod" name="iPodName" id="iPodId">iPod</option>
</select>
</form>
</body>
</html>
setEventListener(window,"load",window_onLoad);①フォームエレメントへ配列オブジェクト(インデックス)を使ってアクセスしている。
function setEventListener(obj,event,func){
if(navigator.appName.indexOf("Microsoft")>-1){
obj.attachEvent("on"+event,func);
}
else{
obj.addEventListener(event,func,false);
}
}
function window_onLoad(){
document.forms[0].elements[0].value="名前を入力してね。"; //①
document.forms["formName"].elements["tfName2"].value="住所を入力してね。"; //②
document.formName.tfName3.value="メルアドを入力してね。"; //③
document.formName.rdName[0].checked=true; //④
var p=document.getElementsByName("cbName1"); //⑤
p[0].checked=true;
var d=document.getElementById("cbId2"); //⑥
d.checked=true;
var s1=document.getElementsByName("selName1"); //⑦
s1[0].options[3].selected=true;
document.forms[0][8].options[0].selected=true; //⑧
document.forms["formName"]["selName2"].options[2].selected=true; //⑨
var s2=document.getElementById("selId2"); //⑩
s2.options[4].selected=true;
}