Jquery implements form Submit button dimmed to prevent multiple clicks to submit duplicate data

We should control the Submit button when the form is submitted, and cannot click repeatedly to submit the data. Otherwise there will be redundant duplication of data in the system, causing the system to appear data garbage. jquery is simple enough to implement button control for form submission, here are the relevant examples and code.

[HTML]View PlainCopyPrint?

2. < form action="${pagecontext.servletcontext.contextpath}/xxx/###" Method="POST" id="messageform">   
4. Name:<input name = "name" type ="text" />
6. < Button type="button" id="Submit"> Submit an application </button>
8. </ form >   
10. < Script >   
12. $ ("#submit"). Click (function () {
16. $ (this). attr ("Disabled", "true"); Set the dimmed button
18. $ ("#messageForm"). Submit ();//Submission Form
20. SetTimeout ("$ (' #submit '). Removeattr (' disabled ')", 3000); Set three seconds after the submit button is displayed
24. })
26. </ SCRITP > </ span >   
30. </ span >   

<form action= "${pagecontext.servletcontext.contextpath}/xxx/###" method= "post" id= "Messageform" >    name: <input name = "Name" type= "text"/>             <button type= "button" id= "submit" > Submit Request </button></form ><script>$ ("#submit"). Click (function () {$ (this). attr ("Disabled", "true");//Set the dimmed button  $ ("#messageForm") Submit the form   setTimeout ("$ (' #submit '). Removeattr (' disabled ')", 3000);//Set three seconds after the submit button display}) </scritp>< /span></span>

Attached: Other implementation methods, also used JS

The first type:

[HTML]View PlainCopyPrint?

2. < form  name= FM method="POST" action="/">
4. < P > button to turn gray </ P >   
6. Name: <input type="text" Name="name"/>
8. < input type="button" value="Commit" onclick = "Javascript:{this.disabled=true;document.fm.submit ();}" >   
12. </ form >   

<form name=fm method= "POST" action= "/" ><p> button dimmed </p>    name: <input type= "text" name= "name"/ >     <input type= "button" value= "Submit" onclick= "Javascript:{this.disabled=true;document.fm.submit ();}" ></form>

The second type:

[HTML]View PlainCopyPrint?

2. < form   name = FM   method = "POST"   span class= "attribute" >action = "/"   span class= "tag" >>   
4. < input  type="Submit " name="Submit" value="Commit" id="Submitid" onclick="Submit ();" >   
6. </ form >   
8. < Script language="javascript">
10. function Submit ()
12. {
14. var submitid=document. getElementById (' Submitid ');
16. submitid.disabled = true  ;
18. Document.fm.submit ();
20. SetTimeout ("submitid.disabled=false;", 3000);//code core here, 3 seconds to restore the button code
22. }
24. </ Script >    

<form name=fm method= "POST" action= "/" >  

Before and after the code control, the background code to be controlled, this way can ensure foolproof!

Background Code Control form submission There is a good way to use the session, specifically, you can refer to the following blog post:

Javaweb Learning Summary (13)--Use the session to prevent the form from repeating the submission http://www.cnblogs.com/xdp-gacl/p/3859416.html

In fact, the background control form repeated submission principle:

(1) Creating a unique token;token on the form submission page can be saved in the session. (It can also be saved in the cache if the cache is used)

(2) The submission of the time verification, the background first to verify token, verification through, before the submission of operations;

(3) When the form data is submitted successfully (save to database-persisted), then delete the corresponding token in the session (cache).

add tokens to the page to prevent unauthorized access-you can also do a duplicate submission of forms, using the principle of token!

http://blog.csdn.net/chinawszjr/article/details/51096095

Jquery implements form Submit button dimmed to prevent multiple clicks to submit duplicate data