防止雙重提交表格

我有一個表單有一個提交按鈕。如果我點擊這個按鈕提交JSON然後將通過AJAX發佈到web服務：防止雙重提交表格

$("#msform").submit(function (e) { 

    $.ajax({ 
     url: 'https://example.com/webservice', 
     type: 'POST', 
     data: formData1, 
     crossDomain: true, 
     dataType: 'json', 
     jsonpCallback: 'callback', 
     success: function (data) { 
      console.log(data); 
     } 
    }); 

});

該網頁也將加載並進入另一個頁面。而加載用戶可以點擊提交按鈕多次，如果他這樣做，然後多次AJAX帖子將完成到Web服務。

我想這個代碼來解決這一點，但它不工作：

// jQuery plugin to prevent double submission of forms 
jQuery.fn.preventDoubleSubmission = function() { 
    $(this).on('submit', function (e) { 
     var $form = $(this); 

     if ($form.data('submitted') === true) { 
      // Previously submitted - don't submit again 
      e.preventDefault(); 
     } else { 
      // Mark it so that the next submit can be ignored 
      $form.data('submitted', true); 
     } 
    }); 

    // Keep chainability 
    return this; 
}; 

$('#msform').preventDoubleSubmission();

任何想法，爲什麼雙張貼不阻止？

來源

2017-01-25 YdB

禁用提交元素？這可以防止它再次被點擊，並且是對用戶的視覺提示，即某事正在發生。 –

解決方法是使用名爲wasSubmitted的variable，它驗證是否已發送ajax請求。

var wasSubmitted = false; 
$("#msform").submit(function (e) { 
    if(!wasSubmitted) { 
     wasSubmitted = true; 
     $.ajax({ 
      url: 'https://example.com/webservice', 
      type: 'POST', 
      data: formData1, 
      crossDomain: true, 
      dataType: 'json', 
      jsonpCallback: 'callback', 
      success: function (data) { 
      console.log(data); 
      } 
     }); 
     return wasSubmitted; 
    } 
    return false; 
});

來源

2017-01-25 12:01:15

不行，如果我進入chrome檢查，然後在$（this）.unbind（'click'）上放置一個斷點;然後點擊多次提交然後它仍然發送並仍然通過提交代碼多次 – YdB

@bboni，是的，對不起。我編輯了我的答案。你必須使用'.unbind'作爲按鈕元素。我使用'$（'按鈕'）'，但你可以用你的'選擇器'替換。假設你有一個id ='btn'的按鈕，那麼你可以使用這個：'$（'＃btn'）。unbind（'click'）'; –

它仍然提交多次:( – YdB

-1

我想簡單的preventDefault就足以

$("#msform").submit(function (e) { 
    e.preventDefault(); 

    $.ajax(..)

來源

2017-01-25 12:02:55 Cashbee

-1

的解決方案，這使我首先想到的，是與JS的onclick禁用按鈕。

document.getElementById("btn_id").setAttribute("disabled","disabled");

來源

2017-01-25 12:04:36

不知道爲什麼downvote。它可以用於ajax提交，但不提供常規表單提交。 – epascarello

防止雙重提交表格

回答

相關問題