How to disable button on click and then call the click event after that

javascript disable onclick after click
disable button after click jquery
jquery disable click event temporarily
how to disable and enable onclick event in jquery
disable button after click html
disable click event jquery
ajax disable button after click
disable submit button after click

I have a button that is executing some insertion into the database.

Problem is when user fills the form and click on the buttons more than one time insertion process executed multiple times.

So i disabled the button on "OnClientClick" of button using script but it does not execute the server side Click event.

here is my button :

<asp:Button ID="btnContinue" runat="server" Text="Continue To Application >>" OnClick="btnContinue_Click" ValidationGroup="criteria" OnClientClick="DiableButton(this)"></asp:Button>

function that disables the button

function DiableButton(btn) {   

    $(btn).attr("disabled", "disabled");        
    $("[Id$='hfDisableBtn']").val($(btn).attr("id"));      

}

function that enables the function that is called from the server side after executing insertion

function EnableButton() {
   var btn = $("[Id$='hfDisableBtn']").val();
   $(btn).removeAttr("disabled");
   $("[Id$='hfDisableBtn']").val("");    
}

what i want is

1) first disable button on click if all the validation satisfied (like Require filed validator)
2) then call the server side click event of that same button
3) enable that button after executing server side click event

How can i achieve this ???

Please help me Thanks is advance

This can be achieved by replacing your asp:Button with the html button and on that button click create an AJAX call to your server function (needs to be marked as WebMethod) then you can exactly follow your requirements

1) first disable button on click if all the validation satisfied (like Require filed validator)
2) then call the server side click event of that same button
3) enable that button after executing server side click event

JavaScript, In this code snippet we will learn how to disable a button on click event. In this example there will be button and it will be disabled after click on the button. In this code snippet we will learn how to disable a button on click event. In this example there will be button and it will be disabled after click on the button. JavaScript Code Snippet – Function to Disable Button on Click JavaScript function < script type = " text/javascript " > function disableButton (btn) {document. getElementById (btn. id). disabled = true; alert (" Button has been disabled. ");} < / script >

I am not sure if your JS code works as you expect, but if the functions work then it should too

1) first disable button on click if all the validation satisfied (like Require filed validator)
2) then call the server side click event of that same button

You said that the function works but doesn't fire the server function so here you only have to add the return true; in your JS function and the server function will be called

3) enable that button after executing server side click event

In your server side function add this line to call the JS function

ScriptManager.RegisterStartupScript(this, this.GetType(), "Funct", "EnableButton();", true);

Also, if you are storing the ID of the button to exclusively use it in these two functions, you can leave them like this:

function DiableButton(btn) {   
    $(btn).attr("disabled", "disabled");             
    return true;
}

function EnableButton() {
   var btn = $('#<%=btnContinue.ClientID %>').val();
   $(btn).removeAttr("disabled");  
}

Hope it helps

jQuery off() Method, Remove the click event for all <p> elements: the selector string must match the one passed to the on() method, when the event handler was attached. We added an “onclick” event handler to our button. As soon as the “onclick” event is fired, we disable the button in question. Once the button has been disabled, we carry out a simple Ajax request. Inside the “complete” callback function of our Ajax request, we re-enable the button again.

Try this.

 $('#btnContinue').prop('disabled', false); 
 $('#btnContinue').click();
 $('#btnContinue').prop('disabled', true);

JQuery: Disable button after click event., When the click event occurs, our handler function is executed. Inside this event handler function, we alert the user that the button has been pressed. Directly afterwards, we disable the button in question by using the JQuery attr method (we set the disabled attribute to “true”). Hello, I have the following Start button which starts a operation. Start -> Clicking Start Button Triggers a Ajax call. In the Interim, I want to disable the click event on the Start Button until the ajax call is complete. Right now I have a click event defined. Could you please tell me how can i disable the Start button click action and

The "click" binding, The click binding adds an event handler so that your chosen JavaScript function This is most commonly used with elements like button , input , and a , but When calling your handler, Knockout will supply the current model value as the Now, KO will pass the data and event objects to your function literal, which are then  jquery disable button after click, jquery disable button on submit The default behavior of a submit button obvious – clicking it submits the contents of a form to the server. This seems quite straightforward.

Element: click event, An element receives a click event when a pointing device button (such as a mouse's primary may extend this interval to make it easier to perform multiple clicks with adaptive interfaces. Stop using click event delegation. The common solution is disables the submit button after user clicked on it. 1. Enable / Disable submit button. 1.1 To disable a submit button, you just need to add a disabled attribute to the submit button. $("#btnSubmit").attr("disabled", true); 1.2 To enable a disabled button, set the disabled attribute to false, or remove the disabled attribute.

Handling Events :: Eloquent JavaScript, A program can then periodically check the queue for new events and react to what it <button>Click me any way you want</button> <script> let button = document. When clicked with the right mouse button, the handler for the button calls a button to the DOM when a key is pressed and remove it again when the key is  I like to disable the button and call a postback, this way the code behind still gets run after the button is disabled. this is how i attach from code behind: btnProcess.Attributes.Add("onclick", " this.disabled = true; __doPostBack('btnProcess', ''); return false;") Then re-enable the button in code behind: btnProcess.Enabled = True

Comments
  • show the validation...after validation you can trigger the button attribute change.
  • I have used asp.net validation like "RequiredFieldValidator" and "RegularExpressionValidator", you can see that in my button as i have used ValidationGroup="criteria"
  • The required field validator does its work before call the server, and even before trigger the onclientclick function, so you don't have to be worried about