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

前端開發中接觸的表單提交仍是不少的，有時候若是不對提交事件進行處理的話會遇到重複屢次提交。

最近開發遇到一個問題，找了挺久才找到緣由解決-_-||，表單一直提交兩次，覺得是雙擊重複提交了，就在提交以後禁用提交按鈕了，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

　　　　}) 
　　} 
})