html 重复提交表单,表单重复提交问题的三种解决思路

前端开发中接触的表单提交还是很多的，有时候如果不对提交事件进行处理的话会遇到重复多次提交。

最近开发遇到一个问题，找了挺久才找到原因解决-_-||，表单一直提交两次，以为是双击重复提交了，就在提交之后禁用提交按钮了，but...

再试还是提交了两次，结果是label包裹input，点击label提交的时候提交两次

经过这次，总结出几条表单重复提交问题查找方向，主要从几个方面来考虑：

第一：如果是点击submit类型的按钮提交表单，就要先看是否是表单的默认提交事件，如果是，禁用默认提交事件(event.preventDefault();)或者改用button类型按钮提交

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

e.preventDefault()

})

第二： 如果是点击按钮ajax提交，就要在提交之后禁用掉按钮，以免重复提交，这个在平时各种情况下的表单提交都考虑进去

禁用按钮，加disabled属性，或者加pointer-event:none属性

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

$.ajax(...)

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

$(this).css('pointer-event','none') // 来禁用点击事件

})

第三： 如果是点击选项提交，那么就要考虑label和input的关联问题了，点击label， 事件冒泡，input也会触发一次提交

可以这样来处理

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

return;

}

});