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

前端开发中接触的表单提交仍是不少的，有时候若是不对提交事件进行处理的话会遇到重复屡次提交。

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

再试仍是提交了两次，结果是label包裹input，点击label提交的时候提交两次，而后处理完这个，表单只提交是一次了正常的，可是最后一个选项没有正确的提交进去，，，最后在提交的时候加一个setTimeout(),终于解决问题

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

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

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

 

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

禁用按钮，加disabled属性，或者加pointer-event:none属性，或者用一个count来计数，只有在点击一次的时候才提交表单

一般在提交成功以后会刷新或跳转页面，失败则不会，要注意一下，若是提交失败，把禁用的按钮解除禁用

let count = 0;
$('#submit').click(function(){
   count++;
   if (page.clicktime == 1) {
   setTimeout(()=>{
     $.ajax({
       success:res=>{
　　　　　　if(!res.success){
　　　　　　　　count = 0  // 提交按钮解除禁用
          }
       },
　　　  error:err=>{
　　　　　　count = 0  // 提交按钮解除禁用
       }
     })
   })

  }
   // $(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;
  }
});

 

最后，其余的点击事件也能够这样处理, 避免屡次触发事件

var isclick = true

$('#id').click(function(){
   if(isclick){
     isclick = false; // 若是双击不想触发两次点击事件，能够在这里加一个禁用点击事件
     $(this).css('pointer-event','none')
     // do something
     setTimeout(()=>{ // 在这里过段时间再释放使得能够再次触发点击事件
 　　　　$(this).css('pointer-event','none')
　　　　isclick = true

　　　　}) 
　　} 
})