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

当用户两次单击“添加”按钮时，从“获取提交”到表中的相同数据两次。

---

因此，请帮助我限制用户提交两次。

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

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

函数禁用（）
{
document.getElementById（'submitBtn'）。disabled=true；
//在此提交
}

您可以使用JavaScript

附加

form.submit.disabled=true

到表单的

onsubmit

事件

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

试试这段代码

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

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

单击“确定”重定向到其他位置时，您可以使用带有“确定”按钮的弹出窗口显示成功消息

禁用“提交”按钮

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

---

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

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

      or

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

---

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

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

---

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

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

---

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

我根据Rogueleader的回答提出了一个解决方案：

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

---

如果您正在使用java服务器端脚本，同时也在使用struts 2，那么您可以参考这个关于使用令牌的链接。

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

和如果您不使用任何框架并寻求简单的训练。 你可以求助于

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

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

为了您的帮助，我正在编写一些代码片段，以提供有关如何实现该功能的想法

java.util.UUID.randomUUID();

---

为表单创建一个类，在我使用的示例中：\u submitlock

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

---

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

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

  });});

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

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

---

您可以将类添加到表单和“提交”按钮中，并使用jquery：

$（函数（）{
//防止两次按下提交按钮
$（“.createForm”）.submit（函数（）{
$（this.find（'.submit'）.attr（'disabled'，true）；
$（this）.find（'.submit'）.text（'正在发送，请稍候…'）；
});
})

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

• 单击第一个可见按钮
• 第一个按钮被禁用
• 单击

  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;'>

---

+1完整地编写代码，并制作一个JSFIDLE是个好主意。

；）。我一直在使用这种技术，但我只是遇到了一个问题。禁用的输入不会发送到服务器，当我将服务器脚本更改为test
$\u POST['submitBtn']
（因为我添加了多个提交按钮，并且需要知道它们使用了哪些按钮）时，由于未设置该按钮而失败。@Barmar您可以隐藏按钮，或者（如果需要保持按钮可见），在按钮顶部放置一个div(s)这样它就不能被点击。这样按钮就不会被禁用，并且会与表单数据一起发送。呵呵。我刚刚遇到了这个问题，有人提交了11次相同的表单！测试结果表明，他们有一个快速的触发指。这反过来又让我想到了…：如果用户在字段上按enter键，这难道还不能提交发件人吗？@Ziyan，使用将对Vijay的答案起作用：）用户还可以通过浏览器（检查元素）编辑代码来再次启用按钮。如果输入不正确怎么办？比如，如果用户在属性为min=0的数字输入中输入负值？该按钮将被禁用，用户在更正其输入后将无法重新单击该按钮，对吗？@foxt7ot如果用户如此精明，他将找到一种方法来双重发布，无论您如何使用javascript来阻止它。只有服务器端重复检查才能真正防止它。这似乎是最好的解决方案，因为如果在发送帖子之前禁用“提交”按钮，您将无法验证“提交”按钮的值，因为它不会被发送…非常好。出于可用性的考虑，让此处理程序也更改按钮的外观（禁用或以其他方式向用户明确说明“计算机现在会说不，waitaminute…”）可能是一个好主意。这带来的小问题是，每次用户点击按钮时，您都会添加另一个事件处理程序。这不会引起任何问题，但有些人可能不希望这样。一个简单的修复方法是简单地删除任何“提交”h
$(this).val("Sending, please wait.");

<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;'>

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