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

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

4

15 回答 15

31

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

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

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

于 2014-02-18T06:29:30.563 回答
24

试试这个代码..

<input type="submit" name="btnADD" id="btnADD" value="ADD" onclick="this.disabled=true;this.value='Sending, please wait...';this.form.submit();" />
于 2013-05-29T12:43:21.133 回答
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();
}
于 2013-05-29T12:46:38.030 回答
4

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

$("#btnADD").on('click', function(btn) {
  btn.disabled = true;
});
于 2013-05-29T12:54:53.220 回答
4

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

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

应为初始页面渲染生成一个令牌并将其保存在会话中，当请求与令牌第一次一起提交时，在 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%>'>
于 2014-12-13T17:38:20.903 回答
2

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

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

function disable()
{
     document.getElementById('submitBtn').disabled = true;
    //SUBMIT HERE
}
于 2013-05-29T12:42:18.947 回答
2

我根据 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
});
于 2014-12-13T16:58:58.990 回答
2

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

  • 您单击第一个可见按钮。
  • 第一个按钮被禁用。
  • 导致按下第二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;'>

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

于 2017-05-11T15:21:54.260 回答
1

您可以使用 JavaScript。

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

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

于 2013-05-29T12:42:52.020 回答
1

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

于 2013-05-29T12:45:56.793 回答
1

禁用提交按钮

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

      or

$('#btnADD').attr('disabled','true');
于 2013-05-29T12:46:02.273 回答
1

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

  });});
于 2015-02-18T21:25:26.707 回答
1

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

于 2017-02-10T15:52:55.310 回答
1

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

$('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);
     }
  });
});
于 2017-11-27T15:55:24.253 回答
0

将类放在所有按钮 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.");
于 2017-01-25T15:41:51.577 回答