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中輸入回車,或者點選提交按鈕就都可以用我們自己的方式提交了