Prevent multiple button clicks

Question

I have the following jQuery code to prevent double-clicking a button. It is working fine. I use Page_ClientValidate() to guarantee a double click only if the page is valid. [If there are verification errors, the flag should not be set, since there is no return to the server]

Is there a better way to prevent a second click on a button before the page loads?

Is it possible to set the flag isOperationInProgress = yesIndicator only if the page causes a isOperationInProgress = yesIndicator to the server? Is there a suitable event for it that will be called before the user can click the button a second time?

Note I am looking for a solution that does not require any new API

Note This question is not a duplicate. Here I try to avoid using Page_ClientValidate() . I am also looking for an event where I can move the code so that I do not need to use Page_ClientValidate()

Note There is no ajax in my script. The ASP.Net form will be sent to the server synchronously. The button click event in javascript is only intended to prevent a double click. Form submission synchronously using ASP.Net.

Existing code

 $(document).ready(function () { var noIndicator = 'No'; var yesIndicator = 'Yes'; var isOperationInProgress = 'No'; $('.applicationButton').click(function (e) { // Prevent button from double click var isPageValid = Page_ClientValidate(); if (isPageValid) { if (isOperationInProgress == noIndicator) { isOperationInProgress = yesIndicator; } else { e.preventDefault(); } } }); }); 

References

• Validator causes incorrect behavior for double-click validation
• Use Page_IsValid or Page_ClientValidate () (for client-side events)

Note by @Peter Ivan in the links above:

calling page_ClientValidate () can lead to an overly intrusive page (multiple warnings, etc.).

Answer 1

I found this solution simple and worked for me:

 <form ...> <input ...> <button ... onclick="this.disabled=true;this.value='Submitting...'; this.form.submit();"> </form> 

This solution was found in: Original solution

Answer 2

disable the button when pressed, enable it after the operation is completed

 $(document).ready(function () { $("#btn").on("click", function() { $(this).attr("disabled", "disabled"); doWork(); //this method contains your logic }); }); function doWork() { alert("doing work"); //actually this function will do something and when processing is done the button is enabled by removing the 'disabled' attribute //I use setTimeout so you can see the button can only be clicked once, and can't be clicked again while work is being done setTimeout('$("#btn").removeAttr("disabled")', 1500); } 

working example

Answer 3

JS provides a simple solution using event properties:

 $('selector').click(function(event) { if(!event.detail || event.detail == 1){//activate on first click only to avoid hiding again on multiple clicks // code here. // It will execute only once on multiple clicks } }); 

Answer 4

using count,

  clickcount++; if (clickcount == 1) {} 

After a repeated set of clicks set to zero.

Answer 5

One way to do this is to set a counter, and if the number exceeds a certain number, return false. easy like that.

 var mybutton_counter=0; $("#mybutton").on('click', function(e){ if (mybutton_counter>0){return false;} //you can set the number to any //your call mybutton_counter++; //incremental }); 

make sure the agent is on top of your call.

Answer 6

This should work for you:

 $(document).ready(function () { $('.applicationButton').click(function (e) { var btn = $(this), isPageValid = Page_ClientValidate(); // cache state of page validation if (!isPageValid) { // page isn't valid, block form submission e.preventDefault(); } // disable the button only if the page is valid. // when the postback returns, the button will be re-enabled by default btn.prop('disabled', isPageValid); return isPageValid; }); }); 

Please note that you should also take steps on the server side to prevent double messages, as not every visitor to your site will be polite enough to visit it using a browser (not to mention a browser with JavaScript support).

Answer 7

Disable pointer events on the first line of your callback, and then resume them on the last line.

 element.on('click', function() { element.css('pointer-events', 'none'); //do all of your stuff element.css('pointer-events', 'auto'); }; 

Answer 8

Perhaps this will help and give the desired functionality:

 $('#disable').on('click', function(){ $('#disable').attr("disabled", true); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="disable">Disable Me!</button> <p>Hello</p> 

Answer 9

We can use and disable clicks to prevent multiple clicks. I tried this for my application and worked as expected.

 $(document).ready(function () { $("#disable").on('click', function () { $(this).off('click'); // enter code here }); }) 

Answer 10

If you do full round-trip feedback, you can just make the button disappear. If there are verification errors, the button will again be visible after the page is reloaded.

The first set adds style to your button:

 <h:commandButton id="SaveBtn" value="Save" styleClass="hideOnClick" actionListener="#{someBean.saveAction()}"/> 

Then make it hide when clicked.

 $(document).ready(function() { $(".hideOnClick").click(function(e) { $(e.toElement).hide(); }); }); 

Answer 11

After several hours of searching, I fixed it as follows:

  old_timestamp == null; $('#productivity_table').on('click', function(event) { // code executed at first load // not working if you press too many clicks, it waits 1 second if(old_timestamp == null || old_timestamp + 1000 < event.timeStamp) { // write the code / slide / fade / whatever old_timestamp = event.timeStamp; } }); 

Answer 12

Just copy this code into your script and edit # button1 with the id of your button and it will solve your problem.

  <script type="text/javascript"> $(document).ready(function(){ $("#button1").submit(function() { $(this).submit(function() { return false; }); return true; }); }); </script 

Answer 13

I changed the decision byKalyani, and so far it has worked beautifully!

 $('selector').click(function(event) { if(!event.detail || event.detail == 1){ return true; } else { return false; } });