表單重復提交問題的三種解決思路

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

最近開發遇到一個問題，找了挺久才找到原因解決-_-||，表單一直提交兩次，以為是雙擊重復提交了，就在提交之后禁用提交按鈕了，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

　　　　}) 
　　} 
})