提交表單是一個最常見的業(yè)務(wù)需求,比如用戶注冊寺鸥,一些信息的輸入都是需要表單的提交倘核。同樣的有時候開發(fā)者需要在表單提交的時候過濾一些的數(shù)據(jù)好爬、做一些必要的操作(例如:驗證表單輸入的正確性,如果錯誤就阻止提交奶卓,從新輸入)此時可以通過submit事件一疯,監(jiān)聽下提交表單的這個動作。
方法一:$ele.submit()
綁定$ele元素夺姑,不帶任何參數(shù)一般是用來指定觸發(fā)一個事件墩邀,用的比較少。
<div id="test">點擊觸發(fā)<div>
$("ele").submit(function(){
alert('觸發(fā)指定事件')
})
$("#text").click(function(){
$("ele").submit() //指定觸發(fā)事件
});
方法二:$ele.submit( handler(eventObject) )
綁定ele元素觸發(fā)點擊操作會執(zhí)行回調(diào) handler函數(shù)眉睹。
<form id="target" action="destination.html">
<input type="submit" value="Go" />
</form>
$("#target").submit(function() { //綁定提交表單觸發(fā)
//this指向 from元素
});
方法三:$ele.submit( [eventData ], handler(eventObject) )
使用與方法二一致荔茬,不過可以接受一個數(shù)據(jù)參數(shù),這樣的處理是為了解決不同作用域下數(shù)據(jù)傳遞的問題竹海。
<form id="target" action="destination.html">
<input type="submit" value="Go" />
</form>
$("#target").submit(11111,function(data) { //綁定提交表單觸發(fā)
//data => 1111 //傳遞的data數(shù)據(jù)
});
通過在<form>元素上綁定submit事件慕蔚,開發(fā)者可以監(jiān)聽到用戶的提交表單的的行為。
具體能觸發(fā)submit事件的行為:
<input type="submit">
<input type="image">
<button type="submit">
當(dāng)某些表單元素獲取焦點時站削,敲擊Enter(回車鍵)
上述這些操作下坊萝,都可以截獲submit事件。
注意:
form元素是有默認提交表單的行為许起,如果通過submit處理的話十偶,需要禁止瀏覽器的這個默認行為,
傳統(tǒng)的方式是調(diào)用事件對象 e.preventDefault() 來處理园细, jQuery中可以直接在函數(shù)中最后結(jié)尾return false即可惦积。
jQuery處理如下:
$("#target").submit(function(data) {
return false; //阻止默認行為,提交表單
});
例子:
//回車鍵或者點擊提交表單
$('#target1').submit(function(e) {
alert('捕獲提交表達動作,不阻止頁面跳轉(zhuǎn)')
});
//回車鍵或者點擊提交表單,禁止瀏覽器默認跳轉(zhuǎn):
$('#target2').submit(function() {
alert('捕獲提交表達動作,阻止頁面跳轉(zhuǎn)')
return false;
});
運行效果: