防止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;
        };