防止双重表单提交

Question

我正在尝试调整一堆现有的网络应用程序,以防止用户意外地弹出提交按钮并提交表单两次.我认为jquery是最好的方法,尽管我的页面使用非常少的jquery.

我在这里发现了许多类似的问题,答案非常有用,但仍然没有提供完整而简单的解决方案.我遇到的第一个解决方案是:

$(document).ready(function(){
    $('form').submit(function(){
         $("input[type=submit]").prop("disabled", true);
    });
});

它工作得很好,在提交表单后灰显了提交按钮.问题是提交按钮本身的值不会随表单一起提交,我猜是因为它被禁用了.通常这不是问题,但对于某些应用程序来说,这是因为它们依赖于提交按钮的值来进行正确的操作.我想要一些更通用的东西,这些东西适用于那些页面而不必重新设计它们.

然后我尝试了另一个例子:

$(document).ready(function(){
  $('form').submit(function(){
    $(this).submit(function() {
      return false;
    });
    return true;
  });
});

这适用于在仍然传输提交按钮的值的同时禁用多个提交,但它不会使提交按钮变灰,因此没有视觉指示提交已发生.如果我找不到更好的解决方案,我可能会继续使用,但我希望两者都传输按钮的值,并使按钮变灰.

我终于尝试了这个:

$(document).ready(function(){
  $('form').submit(function(){
    this.submit();
    $("input[type=submit]").prop("disabled", true);
    return false;
  });
});

但是,它似乎就像第一个示例一样,提交按钮值不随表单一起传输,尽管this.submit()显然应该在禁用之前发生.

我也尝试过隐藏按钮,但这会导致页面重新排列,而不良用户会在鼠标弹跳时意外碰到完全不同的东西,而不是两次点击提交.

我可以用相同大小的东西替换按钮,或者尝试将提交值复制到带有名称的隐藏输入元素中,但这会变得怪诞.有没有一种简单的方法来满足这种简单的需求？

Answer 1

而不是绑定FORM的提交事件,尝试使用提交按钮的单击处理程序并使用:

$('form :submit').click( function () {
    $(this).prop("disabled", true).closest('form').append($('<input/>', {
        type: 'hidden',
        name: this.name,
        value: this.value
    })).submit();
});