Disable a button on click

Question

I have a button control. Once the user clicks on it, the click event should fire and then the button should get disabled. How can I do this? I have the option to use JQuery or JavaScript or both.

Here is my button declaration:

<asp:Button 
  ID="Button1" 
  runat="server" 
  Text="Click Me" 
  onclick="Button1_Click"
/> 

On the button click code behind, I have added a Response.Write(). That should get executed and then the button should be disabled

Answer 1

add an OnClientClick="this.disabled = true;" to your button.

If you are using Asp.net Ajax you might want to look at using PostBack Ritalin.

Answer 2

You need to be careful that the postback occurs before you disable the button through client script. This is a common gotcha with ajax and input boxes. Disabling an input box prevents the data from being sent from the browser, even if you can see text within it while it is disabled. The answer is that you need to use jquery for this to ensure the server-side code runs first before it is disabled.

-Oisin

Answer 3

you can disable it server side

Button1.Enabled = false;

Answer 4

// to disable
this.setAttribute('disabled', true); 
// to enable
this.removeAttribute('disabled');

this is a cross browser solution

Answer 5

Short answer:

The trick to disabling a Button control during a postback is to use UseSubmitBehavior=false.

Long answer:

For whatever reason, the HTML spec dictates that disabled elements should not be included in POST requests. So, if you use JavaScript to disable the HTML element in the client-side onclick event, the input element will be disabled when the browser assembles the POST request, the server won't be properly notified which element raised the postback, and it won't fire server-side click event handlers.

When you set the UseSubmitBehavior property to false, ASP.NET renders an input element of type button instead of the regular input of type submit that the ASP.NET Button control normally generates. This is important because clicking a button element does not trigger the browser's form submit event.

Instead of relying on a browser form submission, ASP.NET will render a client-side call to __doPostBack() within that button element's onclick handler. __doPostBack will raise the postback explicitly, regardless of what POST data comes through in the request.

With the postback being raised independent of the browser submit event, you're freed of the previously mentioned HTML quirk. Then, you can set an OnClientClick of "this.disabled = true;", which will render as "this.disabled = true; __doPostBack('Button1', '');", and things will work as intended.

Answer 6

There is really cool event for body tag "<"body onBeforeunload="buttonId.disabled = true;" ">"

This event triggers right before form submits, in other words your data will be submitted correctly.

Answer 7

When using the "this.disabled = true" method make sure you check if the page is valid before disabling the control if you have validators on the page. If validation fails you won't be able to re-enable the control without reloading the page.

if (Page_IsValid) this.disabled = true;

Answer 8

Don't use directly disable. Because you may have validation controls on the form to validate before you send request to server. So, you need to check whether you have passed validations or not and then only you can disable and process request.

Here is the exact solution for it. http://praveenbattula.blogspot.com/2010/01/disable-button-in-onclick-and-process.html