1. 程式人生 > >表單提交與重置事件

表單提交與重置事件

表單提交事件(onsubmit)是在使用者提交表單時(通常使用“提交”按鈕,也就是將按鈕的type屬性設為submit),在表單提交之前被觸發,因此,該事件的處理程式通過返回false值來阻止表單的提交。該事件可以用來驗證表單輸入項的正確性。

表單重置事件(onreset)與表單提交事件的處理過程相同,該事件只是將表單中的各元素的值設定為原始值。一般用於清空表單中的文字框。

格式:

<form name="formname" onReset="return Funname" onsubmit="return Funname"></form>

formname:表單名稱。

Funname:函式名或執行語句,如果是函式名,在該函式中必須有布林型的返回值。

如果在onsubmit和onreset事件中呼叫的是自定義函式名,那麼,必須在函式名的前面加return語句,否則,不論在函式中返回的是true,還是false,當前事件所返回的值一律是true值。

下例是在提交表單時,呼叫check()函式判斷表單元素是否為空,主意一定要將當前表單作為引數傳遞到check()函式中。然後應用JavaScript編寫表單元素是否為空的函式check(),該函式只有一個引數Form,用於指定要進行檢查的表單物件,無返回值。程式程式碼如下。


<form name="form1" method="post" action="">
        <tr align="center">
            <td height="24" colspan="2"><span class="style1">驗證表単元素是否內為空</ span></td>    

        </tr>

        <tr align="center">
            <td height="22" colspan="2" class="style1">部落格文章評論<td>

       </tr>

        <tr>

            <td width="77" height="22" align=center" class="style1">評論主題:</td>

            <td width="267"><input name="text" type="text" id="text" size="25" maxlength="80"></td>

        </tr>

        <tr>

            <td align="center" class=" style1">評論內容:</td>
            <td><textarea name="textarea" cols="31" rows="5"></textarea></td>
        </tr>
        <tr>
            <td align="center">anbsp;</td>
            <td><input type="submit" name="Submit" value=" 提交" onClick="check (form1) ;">
            <input type="reset" name= "Submit2"  value="重置"></td>
        </tr>
 </ form>

<script language="javascript">

//檢查表単元素是否內空

function check (Form) {
for (i=0;i<Form. length;i++){
                                                                    //Form的屬性elements的首字e要小寫
    if(Form. elements[i].value ==""){
        alert (Form.elements[i]-name + "不能為空!");
                                                        //指定表単元素獲得焦點
        Form. elements[i].focus() ;

        return;

}

}

Form. submit();

}

</script>