onreset属性と onsubmit属性は form要素 に記述し、それぞれリセットボタンと送信ボタンを押したときに起動するスクリプトを指定するイベント属性(イベントハンドラ)です。どちらも起動するスクリプトは、属性値に "return 関数名()" と書かなければいけません。フォームの入力内容の確認、またはその内容をリセットする場合の確認に有用です。
onsubmit属性はフォームのコントロール部品の送信ボタンとなる "submit" が押されたときに起動するスクリプトを指定します。"true" が返されるとフォームのアクションを実行し、"false" が返されると実行を中止します。onreset属性はフォームのコントロール部品のリセットボタンとなる "reset" が押されたときに起動するスクリプトを指定します。"true" が返されるとフォームのコントロール部品に書き込んだ内容や選択したリストなどをリセットし、"false" が返されると内容のリセットを中止します。
次のスクリプトでは全ての入力項目を埋めずに送信ボタンを押すと、ダイアログを表示し全ての項目への入力を促します。
<script type="text/javascript">
function check(){
for(i=0; i<document.mailform.length;i++){
if(document.mailform.elements[i].type=="text"){
if(document.mailform.elements[i].value==""){
alert("まだ入力されていない項目があります。");
return false;
} } }
return true; }
</script>
<form name="mailform" action="onreset" onsubmit="return check()">
<table>
<tr><td>*お名前</td><td><input type="text" name="name" size="40"></td></tr>
<tr><td>*メール</td><td><input type="text" name="mail" size="40"></td></tr>
<tr><td>*コメント</td><td>
<textarea name="message" cols="40" rows="5"></textarea></td></tr>
</table>
<p><input type="submit" value="送信する">
<input type="reset" value="書き直す"></p>
</form>
次のスクリプトではユーザーが入力した内容を送信時に確認し、リセット時にはリセットして良いのかを確認するダイアログを表示します。
<script type="text/javascript">
function check2() {
item1="スポーツ:";
for(i=0;i<3;i++) {
if(document.sample.sport[i].checked){
item1=item1+document.sample.sport[i].value;} }
item2="音楽:";
for(i=0;i<3;i++){
if(document.sample.music[i].checked){
item2=item2+document.sample.music[i].value;} }
item3="映画:";
slct=document.sample.movie.selectedIndex;
item3=item3+document.sample.movie.options[slct].value;
item4="最後に一言:"+document.sample.comment.value;
return confirm(item1+"\n"+item2+"\n"+item3+"\n"+item4);}
</script>
…
<form name="sample" action="xxx.cgi"
onsubmit="return check2()"
onreset="return confirm('内容をリセットしても良いですか?');">
<p>好きなスポーツ:
<input type="radio" name="sport" value="サッカー">サッカー
<input type="radio" name="sport" value="野球">野球
<input type="radio" name="sport" value="テニス">テニス</p>
<p>好きな音楽:
<input type="radio" name="music" value="クラッシック">クラッシック
<input type="radio" name="music" value="ポップス">ポップス
<input type="radio" name="music" value="ロック">ロック</p>
<p>好きな映画: <select name="movie">
<option value="洋画">洋画</option>
<option value="邦画">邦画</option>
</select></p>
<p>最後に一言: <input type="text" name="comment"></p>
<p><input type="submit" value="送信">
<input type="reset" value="リセット"></p>
</form>
http://w3g.jp/xhtml/dic/onreset直近の制作実績等:大阪人間科学大学 New! / 大阪薫英女子短期大学 New! / セキスイハイム みんなのお国じまん New!