Question

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

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

Answer 1

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

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

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

Answer 2

试试这段代码..

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

Answer 3

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

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

Answer 4

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

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

Answer 5

如果您正在使用java服务器端脚本并使用struts 2，那么请参考此链接，该链接讨论使用令牌。

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

当请求与令牌第一次一起提交时，应该生成令牌并保存在初始页面呈现的会话中，在struts动作中运行带有线程名称作为令牌ID的线程并运行逻辑客户端请求，当客户端再次提交相同的请求时，检查线程是否仍在运行（thread.getcurrentthread（）。中断）如果仍在运行，则发送客户端重定向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%>'>

Answer 6

我根据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
});

Answer 7

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

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

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

Answer 8

您可以使用JavaScript。

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

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

Answer 9

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

Answer 10

禁用“提交”按钮

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

      or

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

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

  });});

Answer 12

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

public interface IPropertyTranslator<D extends IDataSet<? extends E>, E extends IElement> {}

public class UniversalPropertyTranslator implements IPropertyTranslator<IDataSet<? extends IElement>, IElement> {}

Answer 13

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

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

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

Answer 14

在所有按钮上输入一个类型=＆＃34;提交＆＃34;例如＆＃34; button-disable-onsubmit＆＃34;并使用如下的jQuery脚本：

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

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

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

Answer 15

这是一个古老的问题，但是我的表格存在一个问题，在这里没有答案，并认为这可能是有用的，因为我怀疑这是一个常见问题。

我在表单上使用jQuery验证，并且如果用户尝试提交表单，但是前端验证阻止提交表单，则提交按钮仍处于禁用状态，这意味着用户无法提交表单。

在解释rogueleaderr的好答案时，我添加了一个快速检查以确保在禁用重新提交表单之前没有前端错误消息：

<script>
$(document).ready(function () {
		var $myForm = $("#My-Form-Class");
		$myForm.submit(function(){
			if ($(".Front-End-Error-Class")[0]){
				console.log("Front End error messages are present - don't submit");
			}
			else{
				$myForm.submit(function(){
						return false;
				});
			}
		});
});
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

在禁用表单之前，它只是检查以确保屏幕上没有错误类别。

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

15 个答案: