表单提交时,jquery禁用提交按钮

Question

无论出于何种原因,尽管此代码确实刷新了页面,但没有字段被发布...

$('form').submit(function(){
    $('input[type=submit]', this).attr('disabled', 'disabled');
});

有没有更好的编码方式？

Answer 1

您的代码正在更改表单的提交操作.它不是提交,而是更改按钮属性.

试试这个:

$('input[type=submit]').click(function() {
    $(this).attr('disabled', 'disabled');
    $(this).parents('form').submit();
});

Answer 2

我已经看到了几种方法:

• 单击时禁用按钮
• 在提交时禁用按钮
• 在提交时禁用表单

但似乎没有一个像预期的那样工作,所以我制定了自己的方法.

在您调用的表单中添加一个类,submit-once并使用以下jQuery:

$('form.submit-once').submit(function(e){
  if( $(this).hasClass('form-submitted') ){
    e.preventDefault();
    return;
  }
  $(this).addClass('form-submitted');
});

这会为您的表单添加另一个类:form-submitted.然后,如果您尝试再次提交表单并且它具有此类,则jQuery将阻止表单提交并退出该函数,return;因此不会重新提交任何内容.

我选择使用$('form.submit-once')而不是$('form')因为我的一些表单使用Ajax,它应该能够多次提交.

你可以在这个jsFiddle上测试它.我添加target="_blank"到表单中,以便您可以多次测试提交表单.

旁注:您可能希望通过阻止服务器端的双提交来考虑非JS用户.例如,有一个存储最后提交日期/时间的会话变量,并在3秒内忽略任何进一步的提交.

Answer 3

我不知道为什么有问题的代码不起作用。这是一个类似且简单的代码片段，我建议您不要将事情复杂化。

$("form").submit(function () {
    // prevent duplicate form submissions
    $(this).find(":submit").attr('disabled', 'disabled');
});

对我来说的优势：

• 它适用于 HTML5表单验证；
• 它以通用方式编写，因此可以“按原样”重新使用。