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

表单提交后，附加一个jQuery处理程序，劫持并"禁用"提交处理程序:

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

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

试试这段代码…

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

点击按钮后可以禁用或隐藏按钮

<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();
}

如果你正在使用java服务器端脚本并且也使用struts 2，那么你可以参考这个关于使用token的链接。

应该生成并保存在会话令牌初始页面渲染,当请求提交首次令牌,在struts动作运行一个线程与线程名称标记id和运行逻辑的任何客户端请求,当客户端提交相同的请求,检查是否仍在运行的线程(thread.getcurrentthread () .interrupted)如果仍然运行然后发送端定向503。

和，如果你不使用任何框架和寻找简单的锻炼。你可以求助于

java.util.UUID.randomUUID();

只是把随机uuid在会话中，也在隐藏的表单字段和在另一边(jsp页面，你正在处理其他工作，如存储数据到数据库等)拿出uuid从会话和隐藏的表单字段，如果表单字段匹配比继续，从会话中删除uuid，如果不是，它可能是可能的，表单已被重新提交。

为了你的帮助，我正在写一些代码片段给想法关于如何实现的事情。

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

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

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

我根据rogueleaderr的回答做了一个解决方案:

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
});

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

• 点击第一个可见按钮。
• 第一个按钮被禁用
• 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;'>

我这样做只是为了让其他从事代码工作的人更清楚。从主观上看，还有其他更好的解决方案。

可以使用JavaScript。

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

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

当点击OK重定向到其他地方时，可以使用带有OK按钮的弹出窗口显示成功消息

禁用提交按钮

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

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

<form onSubmit="disable()"></form>
function disable()
{
     document.getElementById('submitBtn').disabled = true;
    //SUBMIT HERE
}

为表单创建一个类，在我的例子中我使用了:_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();
      }
  });});

在你所有的按钮上添加一个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.");

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

$('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);
     }
  });
});

你可以添加一个类到你的表单和你的提交按钮，并使用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...');
    });
})

这些解决方案都不适合我，因为我的表单是聊天的，并且还需要重复提交。然而，我很惊讶这里没有提供这个简单的解决方案，它在所有情况下都有效。

var sending = 0;
$('#myForm').submit(function(){
if (sending == 0){
sending++;
// SUBMIT FORM
}else{
return false;
}
setTimeout(function(){sending = 0;},1000); //RESET SENDING TO 0 AFTER ONE SECOND
}