Preventing multiple clicks on button

how to prevent multiple clicks on submit button in jquery
javascript prevent double click on link
prevent multiple clicks on button angular
prevent double click on button react
javascript prevent double submit
prevent form resubmission back button javascript
how to prevent multiple clicks on submit button in angular
jquery disable button

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.).


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

How To Avoid Multiple Clicks of Your Order Submit Button, Simple Solutions. The simplest, most common, and probably least effective is the message on the screen instructing the customer not to hit the Submit Order button twice. A Better Solution. Much better is to completely disable the Submit Order button after it is clicked. Graphical Submit Buttons. 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


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
  }
});

How to Disable Double Click on Submit Button, This solution to prevent double clicks uses straight up Javascript - no Jquery necessary. Prevent double clicks on form buttons. by Scot Ranney •� How To Avoid Multiple Clicks of Your Order Submit Button By Tom Bowen If your web site includes an online store, there’s a good chance that on more than one occasion, you’ve found that a customer has accidentally submitted one order more than once, causing multiple charges to their credit card, and possibly affecting the contents of the


disable the button on click, enable it after the operation completes

$(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

Preventing Double Form Submission < JavaScript, Well, what if the user double clicks on the submit button rather than clicking it just the once? The contents of the form will be submitted twice. If there is no response � I have an old ASP.NET web forms application (.NET 2.0) that has a process that takes 30 seconds or so to run when a button is clicked. I need to prevent the button from being clicked twice.


I modified the solution by @Kalyani and so far it's been working beautifully!

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

jQuery disable button on click to prevent multiple form submits , Is there a way to disable the submit button after the first click? or nullify the submission if it were clicked more than once? I'm thinking there should� I am trying to block the user from clicking a button multiple times while data is being processed after it was started by the initial click. Simply disabling the button (buttonBackupNow.Enabled = false;) doesn't help because if the user clicks the button multiple times even when the button is disabled, the form registers the clicks and restarts


Disable pointer events in 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');   
};

Preventing multiple clicks of submit button, This article will demonstrate a way to prevent multiple button clicks on ASP.NET Web Forms. Preventing multiple clicks can help prevent� Is there a way to prevent the command from being fired twice if the user double clicks on the command? EDIT: What is significant in this case is that I am using the Commanding model in WPF. It appears that whenever the button is pressed, the command is executed. I do not see any way of preventing this besides disabling or hiding the button.


Preventing Multiple Button Clicks, Think about it: what's a click? :-) Of course you cannot prevent the user to click on anything anytime, you can only process clicks on different� Prevent Double Click .Please add below code in your aspx page. but still button click event got fired at server side. should be called multiple times with a


Prevent multiple clicks on link, Has anyone successfully added code to prevent a customer from clicking the Submit button on the check out page more than once? Would be greatful for any � You could set a boolean variable to true when the button is clicked and set it to false when you're done processing the click. This way you can ignore multiple clicks and not having to disable the button possibly avoiding annoying flickering of the button.


Preventing multiple clicks on Check Out Submit But, Please any help me. Stop Mutliple click a button without disable. i.e i will dobule click in a button and i will check with console only count 1 time� How can I make sure that a user doesn't click a btn more than once if the processing is a bit slow when they first click the button. Or is there a more common way to handle this possible issue?