防止双重提交表格

我有一个表单有一个提交按钮。如果我点击这个按钮提交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

防止双重提交表格

回答

相关问题