1. 程式人生 > >form表單提交與input的關係,以及jquery呼叫按鈕的問題

form表單提交與input的關係,以及jquery呼叫按鈕的問題

工作中遇到這樣的問題,在一個form表單中,有一個input輸入框+一個a標籤作為提交按鈕,jquery檢測a標籤的點選事件

大概就是這樣

<form>

<input type='text'>

<a> <span>提交</span></a>

</form>

jquery :

$("a.id").click(function(){

alert("開始做提交工作");

});

,這樣並沒有任何問題,再添加了一個輸入框 變成這樣

<form>

<input type='text'>

<input type='text'>

<a> <span>提交</span></a>

</form>


於是問題出現了

當我在第二個文字框中輸入好內容後 按回車鍵不能觸發預設的提交動作了,因為form表單中含有兩個input 所以瀏覽器不能預設提交了

先講解決辦法,我們在form表單中內建一個 <input type=''submit' style="display:none"> 隱藏的提交框,這樣我們再次嘗試再第二個文字框中敲擊enter時可以提交了

我們擷取提交動作 使他執行我們自己的函式<input type='text' onclick=“return myfunction()”>

我們把onclick動作擷取到我們自己的函式中,,注意那個rutun mufunction 而不是 myfuction 這樣如果如果我們返回false 表單就不能繼續提交了,我們返回true才能繼續提交

所以我們再沒有function中這樣寫

function myfunction(){

$('a.id').trigger('click');

return false;

}

也就是 我們再攔截到點選事件時,我們自己用jquery把提交按鈕點選以下,然後返回false; 遮蔽fiorm自己的提交動作,這樣我們再input中輸入回車,或者點選提交按鈕就都可以用我們自己的方式提交了