Web front-end prevention of duplicate submissions

Source: Internet
Author: User

Prevention and control of repeated submissions in Web front-end development

Web front-end data request or form submission often through the DOM of the Click event to operate, but often because the click too fast (young hand speed is very fast), or because the response to wait so that the user mistakenly do not operate and repeated a lot of clicks, resulting in continuous duplication of form data submitted, causing the user health checkup is not good, It even affects the security of the entire system. and the prevention and control of the front end of the repeated submission at least very effective to prevent human normal operation of a lot of unnecessary trouble. Here's how to effectively avoid duplicate submissions of the front-end forms

There are several ways to submit a form:
<namemethodaction= "#">  <typenamevalue= "Commit"  ></form>
In addition, there is a common method is to use the picture: The code is as follows:
<namemethod action>  <type namesrc= " Btnsubmit.jpg "></form>
The third is to use the link to submit the form, using the JavaScript DOM model: The code is as follows:
<namemethodaction= "#">  <a  href= "javascript:form.submit ();" > Submit </a></form>
In fact this one is submitted via JS. Can be understood as
$ ("form"). Find ("a"). Click (function() {           $ ("form").submit (); });
The first and second types can be used JS to:
$ ("input[type= ' Submit ']"). Click (function() {$ ("form"). Submit ();  }); $ ("input[name= ' Submit ']"). Click (function() {$ ("form"). Submit (); });
In short, the form is submitted, of course, there are form submissions and some requests to prevent duplication, such as the response to an event Ajax request (submit data)
$.ajax ({            url:url,            "POST",            data:data,            function  (data) {               callback;            }});    

The preceding submissions and requests, in the network and performance factors, result in the inability to respond in a timely manner and the repetition caused by multiple responses to the event, unless the Click (Trigger event) is considered invalid before the commit response is complete, and then responds to the next request when the current response is over.

If this is a form button, we can disabled the button after clicking.

$ ("input[type= ' Submit ']"). Click (function() {   $ (this). attr ("Disabled", true ); $ ("form"). Submit ();});

According to reason, will click after the button disabled set to True when the button can not click on the second time after the click on the invalid, but you will find that the first click of the form is also unable to submit the normal (as if the standard after the H5, No matter how H5 standard browser I try not to do), it seems that the disabled affect the form of the submission, then first submitted after disabled look at the line

$ ("input[type= ' Submit ']"). Click (function() {  $ ("form"). Submit (); $ (This) . attr ("Disabled", true);});

The result of the experiment, and we cannot guess that the submit () callback is executed at the click Function and the. Submit () function should be judged internally by the Disabel (assuming this is the internal mechanism of the browser), Anyway, in the current interaction cycle, disabled can't submit.

Then we can throw away the disabled use code logic to prevent duplication

$ ("input[type= ' Submit ']"). Click (function() {   if(!$ (this) [0].repeat) {        $ (this) [0].repeat=true;        $ ("form"). Submit ();   }});

In the current click of the button if there is no repeat, then enter the commit and set a value of true repeat property, when the second time to find that this attribute is not submitted, seemingly such logic will prevent duplicate submissions, but the truth is always cruel!

Yes, it will be repeated when the click is too fast, because the HTML default Type=submit input Click will submit a form if the click does not execute the submit, for example

<form name= "form" method= "POST" action= "#"> <input type= "Submit" name= "submit" value= "Submit " > < /form>

<form name= "form" method= "POST" action= "#"> <input type= "Submit" name= "submit" value= "Submit" > </form >

$ ("input[type= ' Submit ']"). Click (function() { Console.log ("Here is click Too!"); });

<form name= "form" method= "POST" action= "#"
</form>
$ ("form"). Find ("div"). Click (function() {

$ ("form"). Submit ();
});

These three codes are an effect submission form, but!!!!!!!!!! We found that blocking the form submission is not in the current interaction period (one click-"Response-" callback), the submit button disabled out, OK, Juvenile code

$ ("form"). Find ("div"). Click (function () {
  if (!$ (this) [0
$ (this) [0].repeat=true;
$ (this). Closest ("form"). Submit ();
}else{
$ (this). attr ("Disabled", true);}
});

See no, the second click on the time of Disabeld off, so only the first success, the second will not be submitted!

Of course, it would be easier to prevent repeated clicks if it was another DOM element.

$ ("div"). Click (function () {
if (!! $ (this) [0].isr epeat ){
Return
}
   $ (this) [0].isrepeat=1;
      $.ajax ({
 Url:url, "POST", data:data, function  (data) {
        
$ (this) [0].isrepeat=0;


}); 

Because the submit () will refresh the attempt, and Ajax will not, you will need to assign a value of false to the repeating property after the callback

Is that even easier? I think you will think so!

Web front-end prevention of duplicate submissions

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.