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

Source: Internet
Author: User
Tags button type

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?
  1. < form action="${pagecontext.servletcontext.contextpath}/xxx/###" Method="POST" id="messageform">   
  2. Name:<input name = "name" type ="text" />
  3. < Button type="button" id="Submit"> Submit an application </button>
  4. </ form >   
  5. < Script >   
  6. $ ("#submit"). Click (function () {
  7. $ (this). attr ("Disabled", "true"); Set the dimmed button
  8. $ ("#messageForm"). Submit ();//Submission Form
  9. SetTimeout ("$ (' #submit '). Removeattr (' disabled ')", 3000); Set three seconds after the submit button is displayed
  10. })
  11. </ SCRITP > </ span >   
  12. </ 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?
  1. < form  name= FM method="POST" action="/">
  2. < P > button to turn gray </ P >   
  3. Name: <input type="text" Name="name"/>
  4. < input type="button" value="Commit" onclick = "Javascript:{this.disabled=true;document.fm.submit ();}" >   
  5. </ 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?
  1. < form   name = FM   method = "POST"   span class= "attribute" >action = "/"   span class= "tag" >>   
  2. < input  type="Submit " name="Submit" value="Commit" id="Submitid" onclick="Submit ();" >   
  3. </ form >   
  4. < Script language="javascript">
  5. function Submit ()
  6. {
  7. var submitid=document. getElementById (' Submitid ');
  8. submitid.disabled = true  ;
  9. Document.fm.submit ();
  10. SetTimeout ("submitid.disabled=false;", 3000);//code core here, 3 seconds to restore the button code
  11. }
  12. </ 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.