如何防止用户两次提交表单答案

【问题标题】：How to Prevent Users from Submitting a Form Twice如何防止用户两次提交表单
【发布时间】：2013-05-24 17:30:09
【问题描述】：

<input type="submit" name="btnADD" id="btnADD" value="ADD"/>

当用户单击两次添加按钮时，从两次将相同的数据提交到表中。所以请帮我限制用户提交两次。

【问题讨论】：

一般来说，您可以添加一些数据库限制或确保在任何一种情况下都不会发生任何错误的东西。

标签： javascript html

【解决方案1】：

当用户点击提交按钮时，禁用该按钮。

<form onSubmit="disable()"></form>

function disable()
{
     document.getElementById('submitBtn').disabled = true;
    //SUBMIT HERE
}

【讨论】：

+1 最好把代码写完整，也做个jsFiddle ;).
我一直在使用这种技术，但我遇到了一个问题。禁用的输入不会发送到服务器，当我将服务器脚本更改为测试$_POST['submitBtn']（因为我添加了多个提交按钮并且需要知道它们使用了哪个按钮）它失败了，因为它没有设置。
@Barmar 您可以隐藏按钮或（如果您需要保持按钮可见），在按钮顶部放置一个 div 以便无法单击。这样按钮就不会被禁用，而是与表单数据一起发送。

【解决方案2】：

您可以使用 JavaScript。

将form.submit.disabled = true; 附加到表单的onsubmit 事件中。

精明的用户可以绕过它，但它应该可以防止 99% 的用户提交两次。

【讨论】：

【解决方案3】：

试试这个代码..

<input type="submit" name="btnADD" id="btnADD" value="ADD" onclick="this.disabled=true;this.value='Sending, please wait...';this.form.submit();" />

【讨论】：

如果用户在某个字段上按下回车键，这不会仍然提交 from 吗？
@Ziyan，使用可以解决 Vijay 的答案:)
用户也可以通过浏览器（检查元素）编辑代码再次启用按钮
如果输入不正确怎么办？就像用户在属性 min=0 的数字输入中输入负值一样？该按钮将被禁用，用户在更正输入后将无法重新单击它，对吧？
@foxt7ot 如果用户如此精明，他会找到一种方法来双重发布，无论您使用什么 javascript 来防止它。只有服务器端的重复检查才能真正防止它。

【解决方案4】：

您可以在单击“确定”重定向到其他地方时使用弹出“确定”按钮显示成功消息

【讨论】：

【解决方案5】：

禁用提交按钮

$('#btnADD').attr('disabled','disabled');

      or

$('#btnADD').attr('disabled','true');

【讨论】：

【解决方案6】：

您可以在单击或隐藏按钮后禁用它。

<input type="submit" name="btnADD" id="btnADD" value="ADD" onclick="disableButton(this)"/>

js:

 function disableButton(button) {
     button.disabled = true;
     button.value = "submitting...."
     button.form.submit();
}

【讨论】：

【解决方案7】：

您可以通知用户他喝了太多咖啡，但最好是使用 javascript 禁用该按钮，例如：

$("#btnADD").on('click', function(btn) {
  btn.disabled = true;
});

【讨论】：

嘿。我刚刚遇到了这个确切的问题，有人提交了 11 次相同的表格！测试结果证明他们有一个快速的扳机指。这反过来又把我带到了这里……：D

【解决方案8】：

提交表单后，使用 jQuery 附加一个处理程序，该处理程序会劫持并“禁用”提交处理程序：

var $myForm = $("#my_form");
$myForm.submit(function(){
    $myForm.submit(function(){
        return false;
    });
});

从提交处理程序返回“false”将阻止表单提交。禁用按钮会对表单的处理方式产生奇怪的影响。这种方法似乎基本上没有副作用，甚至适用于具有多个提交按钮的表单。

【讨论】：

似乎是最好的解决方案，因为如果您在发送帖子之前禁用提交按钮，您将无法验证提交按钮的值，因为它不会被发送...
非常好。为了可用性起见，让这个处理程序也改变按钮的外观可能是个好主意（禁用或以其他方式让用户清楚地知道“计算机现在会说不，等等……”）
对此的小抱怨是，每次用户点击按钮时，您都会添加另一个事件处理程序。这不会引起任何问题，但有些人可能不希望这样。一个简单的解决方法是在添加新的之前删除表单上的所有“提交”处理程序。
有人可以做一个 JSFiddle 或证明这行得通的东西吗？
不错的答案，但请告诉我们禁用提交按钮的奇怪副作用是什么？

【解决方案9】：

我根据rogueleader的回答做了一个解决方案：

jQuery('form').submit(function(){
    jQuery(this).unbind('submit'); // unbind this submit handler first and ...
    jQuery(this).submit(function(){ // added the new submit handler (that does nothing)
        return false;
    });
    console.log('submitting form'); // only for testing purposes
});

【讨论】：

【解决方案10】：

如果您正在使用 java 服务器端脚本并且还使用 struts 2，那么您可以参考此链接，其中讨论了使用令牌。

http://www.xinotes.org/notes/note/369/

应该为初始页面渲染生成一个令牌并将其保存在会话中，当请求与令牌一起提交第一次时，在 struts 操作中运行一个线程名称作为令牌 id 的线程并运行任何逻辑客户端请求，当客户端再次提交相同的请求时，检查线程是否仍在运行（thread.getcurrentthread().interrupted）如果仍在运行则发送客户端重定向503。

并且如果您不使用任何框架并寻找简单的锻炼方式。你可以求助

java.util.UUID.randomUUID();

只需将随机 uuid 放入会话中以及隐藏表单字段和另一侧（您正在处理其他工作的 jsp 页面，例如将数据存储到数据库等）从会话和隐藏表单字段中取出 uuid，如果表单字段匹配而不是进一步进行，从会话中删除 uuid，如果不是，则可能已重新提交表单。

为了您的帮助，我正在编写一些代码 sn-p 来说明如何实现这一目标。

<%
String formId=(java.util.UUID.randomUUID()).toString();
session.setAttribute(formId,formId);
%>
<input type='hidden' id='formId' name='formId' value='<%=formId%>'>

【讨论】：

xinotes.org/notes/note/369 您分享的链接，如果我使用这种方法，第二个请求可能会被接受，而第一个请求会被取消。我说的对吗？

【解决方案11】：

为表单创建一个类，在我的例子中我使用：_submitlock

$(document).ready(function () {
  $(document).on('submit', '._submitlock', function (event) {

      // Check if the form has already been submitted
      if (!$(this).hasClass('_submitted')) {
          // Mark the form as submitted
          $(this).addClass('_submitted');

          // Update the attributes of the submit buttons
          $(this).find('[type="submit"]').attr('disabled', 'disabled');
          // Add classes required to visually change the state of the button
          $(this).find('[type="submit"]').addClass("buttoninactive");
          $(this).find('[type="submit"]').removeClass("buttonactive");

      } else {
          // Prevent the submit from occurring.
          event.preventDefault();
      }

  });});

【讨论】：

【解决方案12】：

在所有按钮 type="submit" 上放置一个类，例如“button-disable-onsubmit”，并使用 jQuery 脚本，如下所示：

$(function(){
    $(".button-disable-onsubmit").click(function(){
         $(this).attr("disabled", "disabled");
         $(this).closest("form").submit();
    });
});

请记住将此代码保存在通用 javascript 文件中，以便您可以在许多页面中使用它。像这样，它成为一个优雅且易于重用的解决方案。此外，您甚至可以添加另一行来更改文本值：

$(this).val("Sending, please wait.");

【讨论】：

【解决方案13】：

您可以在表单和提交按钮中添加一个类并使用 jquery：

$(function() {

    // prevent the submit button to be pressed twice
    $(".createForm").submit(function() {
        $(this).find('.submit').attr('disabled', true);
        $(this).find('.submit').text('Sending, please wait...');
    });
})

【讨论】：

真的不需要添加类 $(this).find('[type=submit]') 肯定会达到同样的效果，而不需要添加任何类。

【解决方案14】：

我对类似问题的解决方案是创建一个单独的隐藏提交按钮。它是这样工作的：

单击第一个可见按钮。
第一个按钮被禁用。
onclick 导致按下第二个提交按钮。
表单已提交。

<input type="submit" value="Email" onclick="this.disabled=true; this.value='Emailing...'; document.getElementById('submit-button').click();">
<input type="submit" id='submit-button' value="Email" name="btnSubmitSendCertificate" style='display:none;'>

我走这条路只是为了让其他处理代码的人更清楚。还有其他一些主观上可能更好的解决方案。

【讨论】：

【解决方案15】：

提交时向表单添加一个类，停止用户双击/提交

$('form[method=post]').each(function(){
   $(this).submit(function(form_submission) {
     if($(form_submission.target).attr('data-submitted')){
        form_submission.preventDefault();
     }else{
        $(form_submission.target).attr('data-submitted', true);
     }
  });
});

【讨论】：