防止jQuery中表单的双重提交

Question

我有一个表单，服务器需要一点时间来处理。我需要确保用户等待，并且不试图通过再次单击按钮重新提交表单。我尝试使用以下jQuery代码：

<script type="text/javascript">$(document).ready(function() {
    $("form#my_form").submit(function() {
        $('input').attr('disabled', 'disabled');
        $('a').attr('disabled', 'disabled');
        return true;
    });});</script>

当我在Firefox中尝试这一点时，所有的东西都会被禁用，但是表单并没有与它应该包含的任何POST数据一起提交。我不能使用jQuery提交表单，因为我需要将按钮与表单一起提交，因为有多个Submit按钮，并且我确定在POST中包含了哪个值。我需要提交的表单，因为它通常是，我需要禁用所有的权利后，立即发生。

谢谢!

防止jQuery中表单的双重提交

Answer 1

计时方法是错误的-你怎么知道这个动作在客户端浏览器上需要多长时间？怎么做$('form').submit(function(){   $(this).find(':submit').attr('disabled','disabled');});当表单提交时，它将禁用所有提交按钮。请记住，在Firefox中，当您禁用按钮时，当您回到历史中时，这个状态将被记住。要防止出现这种情况，必须在页面加载时启用按钮，例如。

Answer 2

我认为内森·龙的回答是正确的。对我来说，我使用的是客户端验证，所以我只是添加了一个条件，即表单是有效的。编辑：如果没有添加，如果客户端验证遇到错误，用户将永远无法提交表单。        // 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                     alert('Form already submitted. Please wait.');                     e.preventDefault();                 } else {                     // Mark it so that the next submit can be ignored                     // ADDED requirement that form be valid                     if($form.valid()) {                         $form.data('submitted', true);                     }                 }             });             // Keep chainability             return this;         };