Preventing multiple clicks on button

Question

I have following jQuery code to prevent double clicking a button. It works fine. I am using Page_ClientValidate() to ensure that the double click is prevented only if the page is valid. [If there are validation errors the flag should not be set as there is no postback to server started]

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

Can we set the flag isOperationInProgress = yesIndicator only if the page is causing a postback to server? Is there a suitable event for it that will be called before the user can click on the button for the second time?

Note: I am looking for a solution that won't require any new API

Note: This question is not a duplicate. Here I am trying to avoid the use of Page_ClientValidate(). Also I am looking for an event where I can move the code so that I need not use Page_ClientValidate()

Note: No ajax involved in my scenario. The ASP.Net form will be submitted to server synchronously. The button click event in javascript is only for preventing double click. The form submission is synchronous using ASP.Net.

Present 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:

1. Validator causes improper behavior for double click check
2. Whether to use Page_IsValid or Page_ClientValidate() (for Client Side Events)

Note by @Peter Ivan in the above references:

calling Page_ClientValidate() repeatedly may cause the page to be too obtrusive (multiple alerts etc.).

Answer 1

I found this solution that is 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

JS provides an easy solution by using the 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   } });