formオブジェクトフォーム送信
- フォーム送信時のチェック処理方法〔ボタンの種類でイベント・メソッドを使い分け〕
- action/methodを指定してフォーム送信〔action/methodプロパティ指定〕
- target先を指定してフォーム送信〔targetプロパティ指定〕
- フォームデータのエンコード形式を取得・設定〔enctypeプロパティ〕
- ラジオボタンの選択肢により送信先変更
- 送信時にフォームのエレメントを有効化する 〔disabled〕
- フォームをリセット(入力値をクリア)する〔resetメソッド〕
- 送信ボタン・クリアボタンを画像ボタンにする〔イメージボタン使用/スタイルシート使用の2サンプル〕
- フォーム名を取得〔nameプロパティ〕
- フォームのエレメント情報を取得〔elements[]〕
- フォームのエレメント数を取得〔lengthプロパティ〕
- フォーム、エレメントのタイプや名前を取得
フォーム送信時のチェック処理方法
ボタンの種類でイベント・メソッドを使い分け
unknown
フォーム送信前に入力チェック処理を入れ、その処理の判定結果によってフォームを送信するかしないかを操作する場合、ボタンの種類によって方法が異なります。
1. 送信ボタン(input type='submit')を使う場合
チェック処理関数の判定結果の戻り値を真偽値で返すようにし、その戻り値をForm要素のonsubmitイベントに指定します。 戻り値がTRUEならフォームは送信され、FALSEなら送信されません。
<form action="content/demo/test.php" method="post" onsubmit="return chk1(this)"> <input type="text" name="txt1" /> <input type="submit" value="送信" /><!-- 送信ボタン --> </form> <script type="text/javascript"> function chk1(frm){ if(frm.elements["txt1"].value==""){ alert("テキストボックスに入力してください"); /* FALSEを返してフォームは送信しない */ return false; }else{ /* TRUEを返してフォーム送信 */ return true; } } </script>
2. 通常ボタン(input type='button')を使う場合
ボタンのonclickイベントでチェック処理関数をコールし、処理の判定によって関数内でsubmitメソッドをコールします。
<form action="content/demo/test.php" method="post"> <input type="text" name="txt2" /> <input type="button" value="送信" onclick="return chk2(this.form)" /><!-- 通常ボタン --> </form> <script type="text/javascript"> function chk2(frm){ if(frm.elements["txt2"].value==""){ alert("テキストボックスに入力してください"); }else{ /* submitメソッドでフォーム送信 */ frm.submit(); } } </script>
action/methodを指定してフォーム送信
action/methodプロパティ指定
unknown
document.フォーム名.method = post | get
以下の例は、Form要素に<form name='form1' method='post' action='/content/demo/test.php' enctype='application/x-www-form-urlencoded'>
と指定したのと同じです。
<script type="text/javascript"> function send(){ var frm=document.frmC; /* テキストボックスが空でないならTRUEを返してフォーム送信 */ if(frm.elements["message"].value!=""){ frm.action="content/demo/test.php"; frm.method="post"; frm.encoding="application/x-www-form-urlencoded"; return true; }else{ /* テキストボックスが空の場合はFALSEを返してフォーム送信しない */ alert("テキストボックスが空の場合は送信しません"); return false; } } </script> <form name="frmC" action="#" onsubmit="return send();"> <input type="text" name="message" size="40" value="テキストボックスが空でないなら、送信します。" /> <input type="submit" value="送信" /> </form>
DOMの場合
フォームオブジェクト.method = post | get
<script type="text/javascript"> function send(){ var frm=document.getElementById("frmC"); var mes=document.getElementById("message"); /* テキストボックスが空でないならTRUEを返してフォーム送信 */ if(mes.value!=""){ frm.action="content/demo/test.php"; frm.method="post"; frm.encoding="application/x-www-form-urlencoded"; return true; }else{ /* テキストボックスが空の場合はFALSEを返してフォーム送信しない */ alert("テキストボックスが空の場合は送信しません"); return false; } } </script> <form id="frmC" action="#" onsubmit="return send();"> <input type="text" id="message" name="message" size="40" value="テキストボックスが空でないなら、送信します。" /> <input type="submit" value="送信" /> </form>
target先を指定してフォーム送信
targetプロパティ指定
unknown
targetプロパティは、action属性で指定したURLの表示方法を指定します。
値 | 説明 |
---|---|
_top | フレームを解除してウィンドウ全体に表示 |
_parent | リンク元の親フレームに表示 |
_self | リンク元と同じフレームに表示 |
_blank | 新しくウィンドウを開いて表示 |
<script type="text/javascript"> /* 選択したターゲットで送信先のURLを開く */ function targetJump(_target){ var frm=document.frmD; /* フォームのターゲットを指定 */ if(_target==""){ alert("targetを選択してください"); return false; }else{ frm.target=_target; /* フォーム送信 */ frm.submit(); } } </script> <form name="frmD" method="post" action="content/demo/test.php"> 送信先URLを <select name="sel" onchange="targetJump(this.options[selectedIndex].value)"> <option value="" selected="selected">▼target選択</option> <option value="_self">self</option> <option value="_blank">blank</option> <option value="_top">top</option> </select> で開く </form>
DOMの場合
<script type="text/javascript"> /* 選択したターゲットで送信先のURLを開く */ function targetJump(_target){ /* フレームオブジェクト */ var frmObj=document.getElementById("frmD"); /* フォームのターゲットを指定 */ if(_target==""){ alert("targetを選択してください"); return false; }else{ frmObj.target=_target; /* フォーム送信 */ frmObj.submit(); } } </script> <form id="frmD" method="post" action="content/demo/test.php"> 送信先URLを <select name="sel" onchange="targetJump(this.options[selectedIndex].value)"> <option value="" selected="selected">▼target選択</option> <option value="_self">self</option> <option value="_blank">blank</option> <option value="_top">top</option> </select> で開く </form>
フォームデータのエンコード形式を取得・設定
enctypeプロパティ
unknown
[DOM] フォームオブジェクト.enctype = エンコード形式
enctypeプロパティは、フォームデータのエンコード形式を取得・設定します。
エンコード形式 | 説明 |
---|---|
application/x-www-form-urlencoded | デフォルト |
multipart/form-data | ファイルアップロード |
text/plain | メール送信 |
フォームのエンコード形式を取得
<script type="text/javascript">
/* フォームデータのエンコード形式を取得 */
function fGetEncype(frmObj){
alert(frmObj.enctype)
}
</script>
<form enctype="application/x-www-form-urlencoded" action="#">
<p>
Name: <input type="text" value="hoge" />
<input type="button" onclick="fGetEncype(this.form)" value="フォームデータのエンコード形式を取得" />
</p>
</form>
<form enctype="multipart/form-data" action="#">
<p>
File: <input type="file" />
<input type="button" onclick="fGetEncype(this.form)" value="フォームデータのエンコード形式を取得" />
</p>
</form>
<form enctype="text/plain" action="#">
<p>
E-mail: <input type="text" value="hoge@domain.co.jp" />
<input type="button" onclick="fGetEncype(this.form)" value="フォームデータのエンコード形式を取得" />
</p>
</form>
エンコード形式を指定してフォーム生成
<p>フォーム生成: <input type="button" onclick="fSetEnctype('application/x-www-form-urlencoded')" value="通常用" /> <input type="button" onclick="fSetEnctype('multipart/form-data')" value="ファイルアップロード用" /> <input type="button" onclick="fSetEnctype('text/plain')" value="メール送信用" /> </p> <hr /> <form action="/content/demo/test.php" method="post" id="resSetEnctype"></form> <hr /> <p>生成したフォームのエンコード形式: <span id="resSetEnctype_enctype"></span></p> <p>生成したHTML文:<br><textarea id="resSetEnctype_html" cols="50" rows="5"></textarea></p> <script type="text/javascript"> /* エンコード形式を指定してフォーム生成 */ function fSetEnctype(_enctype){ var frmObj=document.getElementById("resSetEnctype"); frmObj.enctype=_enctype; /* Form要素の子ノードを削除 */ if(frmObj.childNodes.length>0){ for(var i=frmObj.childNodes.length; i>=0; i--){ if(frmObj.childNodes[i]!=null){ if(frmObj.childNodes[i].nodeName=="INPUT"){ frmObj.removeChild(frmObj.childNodes[i]); } } } } /* テキストボックス生成 */ var txtObj=document.createElement("INPUT"); if(_enctype=="multipart/form-data"){ txtObj.type="file"; }else{ txtObj.value="テキスト"; txtObj.type="text"; } txtObj.name="txt1"; frmObj.appendChild(txtObj); /* 送信ボタン生成 */ var btnObj=document.createElement("INPUT"); btnObj.type="submit"; btnObj.value="送信"; btnObj.name="btn_submit"; frmObj.appendChild(btnObj); document.getElementById("resSetEnctype_enctype").innerHTML=frmObj.enctype; document.getElementById("resSetEnctype_html").innerHTML=frmObj.innerHTML; } </script>
フォーム生成:
生成したフォームのエンコード形式:
生成したHTML文:
ラジオボタンの選択肢により送信先変更
unknown
ラジオボタンの選択肢によりフォームの送信先(action属性)を変更する例です。
<script type="text/javascript"> function changeAction(){ var frm=document.frmB1; /* チェック用変数 */ var err=0; /* チェックボックスが選択されているか調べる */ for(i=0;i<frm.link.length;i++){ if(frm.link[i].checked==true){ /* チェックされていたら、チェック用変数をプラスし、ループを抜ける */ err++; break; } } if(err==0){ /* ラジオボタンが未選択ならアラート表示 */ alert("送信先を選択してください。"); return false; }else{ /* 選択されたラジオボタンの値(URL)にPOST送信 */ frm.action=frm.link[i].value; /* target属性を指定 */ frm.target = "_blank"; /* フォーム送信 */ frm.submit(); } } </script> <form name="frmB1" method="get" action="#"> 送信先URL: <label for="link_b1_1"><input type="radio" id="link_b1_1" name="link" value="/content/demo/test.php" />test.php</label> <label for="link_b1_2"><input type="radio" id="link_b1_2" name="link" value="/content/demo/test2.php" />test2.php</label> <input type="button" value="送信" onclick="changeAction()" /> </form>
DOMの場合
<script type="text/javascript"> function changeActionDOM(){ var frmObj=document.getElementById("frmB1"); /* チェック用変数 */ var err=0; /* チェックボックスが選択されているか調べる */ for(i=0;i<frmObj.length;i++){ if(frmObj[i].name=="link"){ if(frmObj[i].checked==true){ /* チェックされていたら、チェック用変数をプラスし、ループを抜ける */ err++; break; } } } if(err==0){ /* ラジオボタンが未選択ならアラート表示 */ alert("送信先を選択してください。"); return false; }else{ /* 選択されたラジオボタンの値(URL)にPOST送信 */ frmObj.action=frmObj.link[i].value; /* target属性を指定 */ frmObj.target = "_blank"; /* フォーム送信 */ frmObj.submit(); } } </script> <form id="frmB2" method="get" action="#"> 送信先URL: <label for="link_b2_1"><input type="radio" id="link_b2_1" name="link" value="/content/demo/test.php" />test.php</label> <label for="link_b2_2"><input type="radio" id="link_b2_2" name="link" value="/content/demo/test2.php" />test2.php</label> <input type="button" value="送信" onclick="changeActionDOM()" /> </form>
送信時にフォームのエレメントを有効化する
disabled
unknown
disabledプロパティにTRUEを指定した場合、要素が無効化(入力不可)し、値は送信されませんが、FALSEを指定した場合、要素が有効化(入力可)するので値は送信されます。
<script type="text/javascript"> /* 送信ボタンが押されたフォームのテキストボックスのみ有効化 */ function send(frmName){ var frm=document.forms[frmName]; for(var i=0; i<frm.length; i++){ if(frm[i].type=="text"){ frm[i].disabled=false; } } return true; } /* ページ読込時(onLoadイベント)に全フォームのテキストボックスを無効化 */ function init(){ for(var i=0; i<document.forms.length; i++){ for(var a=0; a<document.forms[i].elements.length; a++){ if(document.forms[i].elements[a].type=="text"){ document.forms[i].elements[a].disabled=true; } } } } window.onload=init; </script> <form name="frmF1" method="post" action="#" onsubmit="return send('frmF1');"> <input type="text" name="txt1" size="5" value="値1" /> <input type="text" name="txt2" size="5" value="値2" /> <input type="submit" value="submit"> </form> <form name="frmF2" method="post" action="#" onsubmit="return send('frmF2');"> <input type="text" name="txt3" size="5" value="値3" /> <input type="text" name="txt4" size="5" value="値4" /> <input type="submit" value="submit"> </form> <p>送信された値:<br><?=nl2br(print_r($HTTP_POST_VARS,true));?></p>
DOMの場合
<script type="text/javascript"> /* 送信ボタンが押されたフォームのテキストボックスのみ有効化 */ function send(frmID){ var frmObj=document.getElementById(frmID); for(var i=0; i<frmObj.length; i++){ if(frmObj[i].type=="text"){ frmObj[i].disabled=false; /* 有効化 */ } } return true; } /* ページ読込時(onLoadイベント)に全フォームのテキストボックスを無効化 */ function init(){ var frmObj=document.getElementsByTagName("form"); for(var i=0; i<frmObj.length; i++){ for(var j=0; j<frmObj[i].length; j++){ /* テキストボックスかどうか調べる */ if(frmObj[i][j].type=="text"){ frmObj[i][j].disabled=true; /* 無効化 */ } } } } window.onload = init; </script> <form id="frmF1" method="post" action="#" onsubmit="return send('frmF1')"> <input type="text" name="txt1" size="5" value="値1" /> <input type="text" name="txt2" size="5" value="値2" /> <input type="submit" value="このフォームを送信" /> </form> <form id="frmF2" method="post" action="#" onsubmit="return send('frmF2')"> <input type="text" name="txt3" size="5" value="値3" /> <input type="text" name="txt4" size="5" value="値4" /> <input type="submit" value="このフォームを送信" /> </form> <p>送信された値:<br><?=nl2br(print_r($HTTP_POST_VARS,true));?></p>
フォームをリセット(入力値をクリア)する
resetメソッド
unknown
フォームをリセット(入力値をクリア)するには、resetメソッドを使用します。 input要素のtype属性にresetを指定したのと同じ処理になります。
<form name="frmR" method="post" action="content/demo/test.php"> <dl> <dt>名前:</dt> <dd> <input type="text" name="username" /> </dd> <dt>性別:</dt> <dd> <label for="f1_male"><input type="radio" id="f1_male" name="sex" value="男性" checked="checked" />男性</label> <label for="f1_female"><input type="radio" id="f1_female" name="sex" value="女性" />女性</label> </dd> <dt>居住エリア:</dt> <dd> <select name="area"> <option>---------</option> <option>北海道</option> <option>本州</option> <option>四国</option> <option>九州</option> <option>沖縄</option> </select> </dd> <dt>コメント:</dt> <dd> <textarea cols="30" rows="5" name="comment"></textarea> </dd> </dl> <p> <input type="submit" value="送信" name="btnSubmit" /> <input type="button" value="リセット" onclick="this.form.reset();" /> </p> </form>
resetボタン同様、resetメソッドは、selected、checked、value="・・・" のようにあらかじめフォームに入力しておいたデータはクリアしません。 これらもクリアするには以下のようにフォーム要素を1つ1つ調べてクリアしていく必要があります。
<form action="#" name="frmR2" onsubmit="alert('サンプルのため送信しません。'); return false;"> <dl> <dt>名前:</dt> <dd> <input type="text" name="username" /> </dd> <dt>性別:</dt> <dd> <label for="f2_male"><input type="radio" id="f2_male" name="sex" value="male" checked="checked" />男性</label> <label for="f2_female"><input type="radio" id="f2_female" name="sex" value="female" />女性</label> </dd> <dt>居住エリア:</dt> <dd> <select name="area"> <option>---------</option> <option>北海道</option> <option>本州</option> <option>四国</option> <option>九州</option> <option>沖縄</option> </select> </dd> <dt>趣味:</dt> <dd> <select name="favorite" multiple="multiple"> <option selected="selected">なし</option> <option>夜遊び</option> <option selected="selected">グルメ</option> <option>スポーツ</option> <option selected="selected">買い物</option> </select> </dd> <dt>コメント:</dt> <dd> <textarea name="comment" cols="30" rows="5"></textarea> </dd> </dl> <p> <input type="submit" value="送信" /> <input type="button" value="リセット" onclick="fFormReset(this.form);" /> </p> </form> <script type="text/javascript"> function fFormReset(frmObj){ for(var i=0; i<frmObj.length; i++){ switch (frmObj[i].type){ case "checkbox": case "radio": frmObj[i].checked=false; break; case "select-one": case "select-multiple": frmObj[i].selectedIndex=0; break; case "textarea": case "text": frmObj[i].value=""; break; default: break; } } } </script>
フォーム名を取得
nameプロパティ
unknown
<form action="#" name="hogeform"> <input type="button" onclick="alert(this.form.name);" value="フォーム名取得" /> </form>
フォームのエレメント情報を取得
elements[]
unknown
<form action="#"> <p><input type="button" value="フォーム内のエレメント情報を取得" onclick="fGetElements(this.form)" /></p> <p><input type="text" value="テキストボックス" /></p> <p> <select name="items"> <option>----------</option> <option>項目1</option> <option>項目2</option> </select> </p> <p> <input type="checkbox" name="chk_1" value="1" />チェックボックス1 <input type="checkbox" name="chk_2" value="2" />チェックボックス2 </p> <p> <input type="radio" name="r" value="1" />ラジオボタン1 <input type="radio" name="r" value="2" />ラジオボタン2<br> </p> </form> <div id="resGetElements"></div> <script type="text/javascript"> function fGetElements(frmObj){ var s=""; s+="フォームの要素数: <em>"+frmObj.elements.length+"<br \/>"; for(var i in frmObj){ s+=i+": <em>"+frmObj[i]+"<\/em><br \/>"; } document.getElementById("resGetElements").innerHTML=s; } </script>
フォームのエレメント数を取得
lengthプロパティ
unknown
[DOM] フォームオブジェクト.elements["length"]
<script type="text/javascript"> /* JavaScript */ function getElementLength(frm){ alert("フォームのエレメント数 = "+frm.length); } /* DOM */ function getElementLengthDOM(frmObj){ alert("フォームのエレメント数 = "+frmObj.elements["length"]); } </script> <form action="#"> <input type="radio" name="sex" />男性 <input type="radio" name="sex" />女性 <input type="button" value="エレメント数取得" onclick="getElementLength(this.form);" /> <input type="button" value="エレメント数取得(DOM)" onclick="getElementLengthDOM(this.form);" /> </form>
フォーム、エレメントのタイプや名前を取得
unknown
document.フォーム名.エレメント名.name
document.フォーム名.エレメント名.value
<script type="text/javascript">
/* JavaScript */
function fGetElementType(){
var s="";
var frm=document.forms["frmA1"];
for(var i=0; i<frm.length; i++){
s+="名前(name)= " + frm.elements[i].name + "\n";
s+="名前(type)= " + frm.elements[i].type + "\n";
s+="名前(value)= " + frm.elements[i].value + "\n\n";
}
alert(s);
}
</script>
<form action="#" name="frmA1">
<p>
フォーム要素の名前・タイプ・値を表示
</p>
<p>
<input type="radio" name="pet" value="ham" />ハムスター
<input type="checkbox" name="fruit" value="apple" />リンゴ
<input type=text name="drink" value="coffee" size="8" />
<select name="age">
<option value="age10">10歳
<option value="age20">20歳
</select>
<input type="button" name="btn" value="ボタン" />
</p>
<p><input type="button" value="フォームの全エレメントの名前・タイプ・値を取得" onclick="fGetElementType()" /></p>
</form>
DOMの場合
フォームオブジェクト[].name
フォームオブジェクト[].value
<script type="text/javascript">
/* DOM */
function fGetElementTypeDOM(){
var s="";
var frmObj=document.getElementById("frmA2");
for(var i in frmObj){
if(frmObj[i]!=null){
if(frmObj[i].type==undefined) continue;
s+="<p>";
s+="name = "+frmObj[i].name+"<br \/>";
s+="type = "+frmObj[i].type+"<br \/>";
s+="value = "+frmObj[i].value;
s+="<\/p>\n";
}
}
document.getElementById("redfGetElementType").innerHTML=s;
}
</script>
<form action="#" id="frmA2">
<p>
<input type="radio" name="pet" value="ham" />ハムスター
<input type="checkbox" name="fruit" value="apple" />リンゴ
<input type=text name="drink" value="coffee" size="8" />
<select name="age">
<option value="age10">10歳</option>
<option value="age20">20歳</option>
</select>
<input type="button" name="btn" value="ボタン" />
</p>
<p>
<input type="button" value="フォームの全エレメントの名前・タイプ・値を取得(DOM)" onclick="fGetElementTypeDOM()" />
</p>
<div id="redfGetElementType"></div>
</form>