目次

オブジェクトなJavaScriptの基礎講座

onSubmitイベント処理

◆ 概説

onSubmitイベントはSubmitボタンがクリックしたときに発生します。

このイベントに対してブラウザ上で任意の処理を行うことができます。

尚、onSubmitのハンドラは<INTPUT TYPE="submit">でなく<FORM>タグ内に記述します。

対象オブジェクト

    form

onSubmitイベント処理の適用方法

例、アンケートプログラムを作成し、Submit押下時、各項目が入力されたかをチェックする。

<p>
<script type="text/javascript">
    function test_onSubmit(){
        if(document.TestForm.ID.value == ""){
            alert("お名前が入力されていません");
            return false;
         }
         for(var i=0; i < 5; i++){
            if(document.TestForm.hyouka[i].checked){
               break;
            }
         }
         if(i >= 5){
            alert("評価項目が入力されていません");
            return false;
         }
         return true;
    }
     function clear(){
         document.TestForm.ID.value = "";
         document.TestForm.hyouka.value = "";
     }
</script>
</p>
<form name="TestForm" ACTION="mailto:chaichanx@parkcity.ne.jp" METHOD="POST" 
        ENCTYPE="text/plain" onSubmit="return test_onSubmit()">
<p>
アンケートにご協力ください。<br>
お名前:<INPUT TYPE="text" NAME="ID" SIZE=20><br>
本サイトの評価を一つクリックしてください。<br>
<INPUT TYPE="radio" NAME="hyouka" value="5">大変良い(評価5)<br>
<INPUT TYPE="radio" NAME="hyouka" value="4">良い(評価4)<br>
<INPUT TYPE="radio" NAME="hyouka" value="3">普通(評価3)<br>
<INPUT TYPE="radio" NAME="hyouka" value="2">いまいち(評価2)<br>
<INPUT TYPE="radio" NAME="hyouka" value="1">いまに(評価1)<br>
<INPUT TYPE="submit" VALUE="メール送る">
<INPUT TYPE="reset" VALUE="取り消し" onClick="clear()">
</p>
</form>
補足

以下のように

         for(var i=0; i < 5; i++){
            if(document.TestForm.hyouka[i].checked){
               break;
            }
         }

radioオブジェクトは、同名で複数にした場合は、オブジェクトの配列になります。

また、radioオブジェクトは、チェックされたかの真理値をもつcheckedプロパティあります。

例の処理結果

アンケートにご協力ください。
お名前:
本サイトの評価を一つクリックしてください。
大変良い(評価5)
良い(評価4)
普通(評価3)
いまいち(評価2)
いまに(評価1)

目次