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

Question

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

show the validation...after validation you can trigger the button attribute change. — Sudhanshu Saxena
– Sudhanshu Saxena, Commented May 29, 2015 at 13:02
I have used asp.net validation like "RequiredFieldValidator" and "RegularExpressionValidator", you can see that in my button as i have used ValidationGroup="criteria" — Aijaz Chauhan
– Aijaz Chauhan, Commented May 29, 2015 at 13:05

Yuri · Accepted Answer · 2015-05-29 13:28:16Z

1

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

answered May 29, 2015 at 13:28

Yuri

2,9084 gold badges31 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Enrique Zavaleta · Accepted Answer · 2015-05-29 13:57:33Z

0

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

answered May 29, 2015 at 13:57

Enrique Zavaleta

2,1083 gold badges23 silver badges31 bronze badges

1 Comment

Enrique Zavaleta Over a year ago

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

Harshad Vekariya · Accepted Answer · 2018-12-10 14:14:31Z

0

Try this.

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

answered Dec 10, 2018 at 14:14

Harshad Vekariya

1,0621 gold badge9 silver badges28 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related