防止双重形式提交 [英] Prevent double form submission

问题描述

我正在尝试改编一堆现有的Web应用程序，以防止用户意外地在提交"按钮上弹跳并提交两次表单.我以为jquery将是最好的方法，尽管我的页面在其他方面很少使用jquery.

I am trying to adapt a bunch of existing web apps to prevent users from accidentally bouncing on the submit button and submitting the form twice. I thought jquery would be the best way to do this, although my pages use very little jquery otherwise.

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

I've found many similar questions here, and the answers have been very useful but still do not offer a complete and simple solution. The first solution I hit upon was this:

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

效果很好，在提交表单后将提交"按钮涂成灰色.问题在于，提交按钮本身的值不会随表单一起提交，我想是因为它已被禁用.通常这不是问题，但是对于某些应用程序来说，这是因为它们依赖于Submit按钮的值来进行正确的操作.我希望有一些更通用的东西可以用于那些页面，而不必重新设计它们.

It works very well, greying out the submit button(s) after the form is submitted. The problem is that the value of the submit button itself does not get submitted with the form, I guess because it is disabled. Usually that is not a problem, but for some of the applications it is because they depend on the value of the submit button for correct operation. I would like something more general that will work for those pages without having to redesign them.

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

I then tried this other example:

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

这在禁用多个提交同时仍传输提交按钮的值的情况下效果很好，但是它不会使提交按钮变灰，因此没有视觉指示已发生提交.如果找不到更好的解决方案，我可能会同意，但是我既想传递按钮的值，又要使按钮变灰.

This works well for disabling multiple submissions while still transmitting the value of the submit button, but it does not grey out the submit button, so there is no visual indication that the submission has occured. I will probably go with if I cannot find a better solution, but I would like both to transmit the value for the button, and to grey out the button.

我终于尝试了这个:

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

但是，似乎与第一个示例类似，尽管this.submit()显然应该在禁用之前发生，但提交表单中的提交按钮值并未随表单一起发送.

However, it seems to be like the first example in that the submit button value is not transmitted with the form, despite that the this.submit() apparently should be happening before the disabling.

我也尝试过隐藏按钮，但是这会使页面重新排列，可怜的用户会意外地在鼠标弹跳中击中完全不同的东西，而不是两次击中提交.

I've also tried just hiding the button, but that causes the page to get re-arranged, and the poor user will accidentally hit something completely different on the mouse bounce, rather than hitting the submit twice.

我可以用相同大小的按钮替换按钮，或者尝试将提交值复制到具有名称的隐藏输入元素中，但这变得很奇怪.有满足此简单需求的简单方法吗?

I could replace the button with something of the same size, or try to copy the submit value into a hidden input element with the name, but that is getting grotesque. Is there a simple way to meet this simple need?

推荐答案

代替绑定FORM的Submit事件，请尝试使用Submit按钮的单击处理程序并使用:

Instead of binding the submit event of FORM, try using the click handler of submit button and used:

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

这篇关于防止双重形式提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！