Talk about preventing duplicate click Submit < go >

Http://www.cnblogs.com/jinguangguo/archive/2013/05/20/3086925.html

First of all, what does it mean to prevent repeated click-through submissions?

We visit some websites, after the input form is completed, click the Submit button to submit, the submit button will become gray, the user can no longer click the second time until the page reload or jump. In this way, it is possible to prevent the user from repeating the commit resulting in logic errors on the application.

As a matter of depth, it does not necessarily occur on a form's commit event, but can also occur on an asynchronous request from Ajax. Effectively in the Web client to adopt a certain mechanism to prevent repeated click Submit, will greatly reduce the server-side pressure.

So, let's take a look at how to prevent duplicate-click submissions from the processing of two different requests for form submission and Ajax.

　　One, form submission

Take the login form as an example and the code is as follows:

<FormAction= "Login.do"Method= "POST"><InputType= "Text"Name= "username" < input type= "Password"  Name=" password "/> <input type= "Submit"  Onclick=" this.disabled=true; this.value= ' Log in ... '; This.form.submit (); "  Value= "Login" /></form>      

After clicking the login button to submit, the submit button will turn gray and give the user a friendly hint (login ...). ), the user can no longer click the second time until the page reloads or jumps.

It can be found that we do not need to restore this button to a state that can be logged in again, just because the page has been reloaded or jumped.

But what should we do with the request for Ajax?

　　Second, the AJAX request

1 (function($) {23 $ ('. J-login '). Click (function() {45var loginbtn =This;67//1. First form verification8//......910//2. Disable the submit button to prevent repeated clicks of the button$ (LOGINBTN). attr (' disabled ', ' disabled ');1213//3. To provide users with friendly status tips$ (LOGINBTN). Text (' Login ... ');1516//4. Asynchronous Commit17$.ajax ({URL: ' login.do ',Data: $ (This). Closest (' Form[name= ' LoginForm "]). Serialize (),Type: ' Post ',Success:function(msg) {2223if (msg = = = ' OK ')) {Alert (' Login successful! ‘);2526//TODO Other actions ...27} else {28 alert (' Login failed, please login again! ' 32 }33 34 }35 }); 36 37 }); 38 39}) (jQuery);           

You can find that when the login fails, you need to re-enable the login button to have the logon event.

Of course, we can replace it in a more elegant way.

1 (function($) {23 $ ('. J-login '). Click (function() {45var loginbtn =This;67//1. First form verification8//......910//2. Asynchronous Commit11$.ajax ({URL: ' login.do ',Data: $ (This). Closest (' Form[name= ' LoginForm "]). Serialize (),Type: ' Post ',Beforesend:function() {16//3. Disable the submit button to prevent repeated clicks of the button$ (LOGINBTN). attr (' disabled ', ' disabled ');1819//4. To provide users with friendly status tips$ (LOGINBTN). Text (' Login ... ');21st},Complete:function() {23//5. Make the login button available again$ (LOGINBTN). Removeattr (' disabled ');25},Success:function(msg) {2728if (msg = = = ' OK ')) {29 alert (' Login successful! ' 

Here, I've just given one of the simplest examples, and there are many other ways to prevent repeated click submissions, such as

1> define the flag bit:

After clicking on the trigger request, the flag bit is false, and the flag bit is true after the request (or including the specific orchestration process after the request). Use the flag bit to determine if the user clicks have the appropriate response.

2> unloading and overloading binding events:

After clicking on the trigger request, the Click event is uninstalled, and the binding event is re-loaded after the request (or including the specific orchestration process after the request).

3> Replace (remove) button DOM

After clicking on the trigger request, the button DOM object is replaced (or removed), which naturally does not have a click event, and the New button DOM is defined as a click event after the request (or even the specific business process processing of the request).

Of course, there are other ways to achieve, welcome to Bo friends to add.

　　Iii. Frequency of requests

Believe that we have encountered such a business, we allow it to repeat the click (or other user events), but not to allow a certain amount of time to exceed the number of XX times. This selects a compromise from a user-friendly experience and a server under pressure.

The most suitable example is the keyword search match.

I believe we must first think of throttling function.

1var timer =Null;23 $ (input). KeyUp (function(){45var value = $ (This). Val ();67Cleartimeout (timer);89//If the keyboard is struck too fast, less than 100 milliseconds will not send a request to the background, but the final request is always made.Ten timer = SetTimeout (function() {11//Trigger Request12$.ajax ({13 url: ' typeahead.do ' 14 type: ' Get ' 

　Iv. Summary

In the macro sense, we need to do "prevent repeated click commit" for each button, in the face of this situation, we can adopt a certain strategy to encapsulate it implementation (such as defining a generic button class binding event).

In specific cases, we do not need to do every button to "prevent repeated click to submit", just need to do some of the complex background business logic, or file upload, or call other non-project interface caused by network delay, etc. need to do "prevent repeated click Submit." At the same time, we have to give user friendly hints (such as text prompts, render loading, display file upload progress bar, etc.). The two need to be seen together and made up. Of course, we can extract the status individually to display this implementation logic. The code is as follows--

1//Full-site Ajax loading tips2 (function($) {34var str = ' <div class= ' ajax-status "style=" Display:none; " > '5 + ' <div class= "ajax" > '6 + ' </div> ';78var dom = $ (str). Prependto (' body ');9$ (document). Ajaxstart (function(){Dom.stop (Truefalse). Queue (function(){12 $ (this). Show (). Dequeue (); 13 }); 14 }); 15 16 $ (document). Ajaxstop ( function17 Dom.queue (function () { 18 $ (this19 }); 20 }); 21 22}) (jQuery);                 

In short, the "Prevent repeated click submit" scenario and the implementation of a number of ways, need to be specific to the specific project situation.

Talk about preventing duplicate click Submit < go >