Home > Web Front-end > JS Tutorial > Jquery makes the form submit button gray to prevent multiple clicks from submitting duplicate data

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

PHPz
Release: 2018-10-10 16:27:32
forward
1590 people have browsed it

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>
Copy after login

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>
Copy after login

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>
Copy after login

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

Related labels:
source:csdn.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template