天天看點

原生javascript怎樣控制form表單的送出和阻止送出

先看一段代碼

<pre name="code" class="html"><form action="index.jsp" method="post" οnsubmit="submitTest();"> 
<INPUT value="www"> 
<input type="submit" value="submit"> 
</form>      
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
function submitTest() { 
// 一些邏輯判斷return false; 
} 
//--></SCRIPT>      

點選submit按鈕該表單并未送出。因為有一處應該改為下列代碼 : 

<form action="index.jsp" method="post" οnsubmit="return submitTest();">原來onsubmit屬性就像是<form>這個html對象的一個方法名,其值(一字元串)就是其方法體,預設傳回true; 

和Java一樣,在該方法體中你可以寫任意多個語句,包括内置函數和自定義函數。 

在這裡submitTest()雖然傳回false,但我們隻執行了此函數,沒有對其結果進行任何處理。 

而οnsubmit="return submitTest()利用到了它的傳回值,達到了預期效果。

3.事件處理函數傳回false的問題,在大多數情況下,為事件處理函數傳回false,可以防止預設的事件行為. 

例如,預設情況下點選一個<a>元素,頁面會跳轉到該元素href屬性指定的頁. Return False 就相當于終止符,Return True 就相當于執行符。

 在js中return false的作用一般是用來取消預設動作的。比如你單擊一個連結除了觸發你的 onclick時間(如果你指定的話)以外還要觸發一個預設事件就是執行頁面的跳轉。是以如果 你想取消對象的預設動作就可以return false。

return false應用比較多的場合有: <body>

 1, <a href="/" mce_href="/" οnclick='test();'>超級連結 </a>

 2, <input type="button" οnclick='test()' value="送出"> 

3, <form name="form1" onsubmIT="return test();"> 内容 <input type="submIT" value="送出"> </form> </body> 

<input type="submit" οnclick="submitAction(); return false;" /> submitAction 方法裡面有送出表單的動作。如果不加 return false, 

在執行完 submitAction 之後,submit 按鈕還會繼續執行它的預設事件,就會再次送出表單。這可能就是很多錯誤的根源。 的确,return false的含義不是阻止事件繼續向頂層元素傳播,而是阻止浏覽器對事件的預設處理。你可以這樣試驗:首先将所有的js腳本注釋掉,在IE浏覽器中嘗試拖動一下圖檔,你會發現滑鼠會成為禁止操作的樣式,圖檔是被禁止拖動的,它是浏覽器針對mousemove事件所提供的預設行為。

return false就是為了去掉這種行為,否則就會出現你描述的中斷事件連續執行。