Jquery makes the form submit button gray to prevent multiple clicks from submitting duplicate data

When submitting a form, we should control the submit button and cannot click multiple times to submit data repeatedly. Otherwise, there will be redundant and duplicate data in the system, causing data garbage in the system. jQuery can easily control the form submit button. Below are the relevant examples and code.

<form action="${pageContext.servletContext.contextPath}/XXX/###" method="post" id="messageForm">
	姓名:<input name = "name" type="text" />
             <button type="button" id="submit">提交申请</button>
</form>
<script>
$("#submit").click(function(){

    $(this).attr("disabled","true"); //设置变灰按钮
    $("#messageForm").submit();//提交表单
    setTimeout("$('#submit').removeAttr('disabled')",3000); //设置三秒后提交按钮 显示
     
})
</scritp></span>

</span>

Attachment: Other implementation methods also use js

The first one :

<form name=fm method="POST" action="/">
<p>按钮变灰</p>
    name: <input type="text" name="name"/>
     <input type="button" value="提交" onclick="javascript:{this.disabled=true;document.fm.submit();}">

</form>

The second type:

<form name=fm method="POST" action="/" >
  <input type="submit" name="Submit" value="提交" id="submitId" onclick="submit();">
</form>
<script language="javascript">
 function submit()
 {
 var submitId=document.getElementById('submitId');
 submitId.disabled=true;
 document.fm.submit();
 setTimeout("submitId.disabled=false;",3000); //代码核心在这里，3秒还原按钮代码
}
</script>

The front and rear code must be controlled, and the background code must also be controlled, so that It’s guaranteed to be foolproof!

A good way to control form submission by background code is to use session. For details, you can refer to the following blog post:

In fact, the principle of background control of repeated form submission:

( 1) Generate a unique token on the form submission page; the token can be saved in the session. (If cache is used, it can also be saved in the cache)

(2) Verification when submitting, the background first verifies the token, and only after the verification is passed can the submission operation be performed;

(3) When the form data is submitted successfully (saved to database - persistence), then the corresponding token in the session (cache) is deleted.

For more related tutorials, please visit JavaScript Video Tutorial