前端開發(fā)中接觸的表單提交還是很多的，有時候如果不對提交事件進(jìn)行處理的話會遇到重復(fù)多次提交。

最近開發(fā)遇到一個問題，找了挺久才找到原因解決-_-||，表單一直提交兩次，以為是雙擊重復(fù)提交了，就在提交之后禁用提交按鈕了，but...

再試還是提交了兩次，結(jié)果是label包裹input，點擊label提交的時候提交兩次

經(jīng)過這次，總結(jié)出幾條表單重復(fù)提交問題查找方向，主要從幾個方面來考慮：

第一：如果是點擊submit類型的按鈕提交表單，就要先看是否是表單的默認(rèn)提交事件，如果是，禁用默認(rèn)提交事件(event.preventDefault();)或者改用button類型按鈕提交

$('#submit').click(function(e){

e.preventDefault()

})

第二： 如果是點擊按鈕ajax提交，就要在提交之后禁用掉按鈕，以免重復(fù)提交，這個在平時各種情況下的表單提交都考慮進(jìn)去

禁用按鈕，加disabled屬性，或者加pointer-event:none屬性

$('#submit').click(function(){

$.ajax(...)

$(this).attr('disabled,true) // 禁用按鈕or

$(this).css('pointer-event','none') // 來禁用點擊事件

})

第三： 如果是點擊選項提交，那么就要考慮label和input的關(guān)聯(lián)問題了，點擊label， 事件冒泡，input也會觸發(fā)一次提交

可以這樣來處理

$('label').click(function(e) {if($(e.target).is('input')){ //點擊label的時候，如果事件源是input,那么就把它禁用掉

return;

}

});

總結(jié)

以上是生活随笔為你收集整理的html 重复提交表单,表单重复提交问题的三种解决思路的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。