OnclientClick and OnClick is not working at the same time ?

Question

Hello All,

I have a button like the following,

<asp:Button ID="pagerLeftButton" runat="server" OnClientClick="disable(this)" onclick="pager_Left_Click" Text="<" />

When I use my button like that, onclick is not firing. When I remove OnClientClick, then onclick is firing.

What I need to do is, disable the button during the postback and enable it after the postback ends.

Edit: Additional information:

I added break point to my firing functions is c# part and I am debugging, they are not firing for sure. Those functions are like

protected void pager_Left_Click(object sender, EventArgs e)
{
//Do smthing.
}
protected void pager_Right_Click(object sender, EventArgs e)
{
//Do smthing.
}

and when I click my button, it is disabled for 1-2 seconds and automatically enabled, but I am not sure why it is enabled. I didn't add any part for it to be enabled again.

Answer 1

I'm going to favorite this question to see if you get a good answer. So please do offer some feedback on what finally works for you. I am actually working on this exact problem today at work, in preventing double clicks on .NET buttons. I've tried so many suggestions on disabling a client click and never could get it to work.

What I ended up doing was putting a wrapper around the button call where I set a session variable to tell me when the button was last clicked. If within n seconds, escape out. Otherwise process.

Answer 2

Is your disable() Javascript method returning false? If so, it will cancel the event.

Answer 3

Unless disable is a function, it's blowing up due to a javascript error, something like this is the simplest unless you're using jQuery or another library:

<asp:Button ID="pagerLeftButton" runat="server" 
            OnClientClick="this.disabled=true;" 
            OnClick="pager_Left_Click" Text="<" />

Answer 4

The trick is to use the OnClientClick and UseSubmitBehavior properties of the button control. There are other methods, involving code on the server side to add attributes, but I think the simplicity of doing it this way is much more attractive:

<asp:Button runat="server" ID="BtnSubmit"  OnClientClick="this.disabled = true; this.value = 'Submitting...';"   UseSubmitBehavior="false"  OnClick="BtnSubmit_Click"  Text="Submit Me!" />

OnClientClick allows you to add client side OnClick script. In this case, the JavaScript will disable the button element and change its text value to a progress message. When the postback completes, the newly rendered page will revert the button back its initial state without any additional work.

The one pitfall that comes with disabling a submit button on the client side is that it will cancel the browser’s submit, and thus the postback. Setting the UseSubmitBehavior property to false tells .NET to inject the necessary client script to fire the postback anyway, instead of relying on the browser’s form submission behavior. In this case, the code it injects would be:

__doPostBack('BtnSubmit','')

This is added to the end of our OnClientClick code, giving us this rendered HTML:

<input type="button" name="BtnSubmit"  onclick="this.disabled = true; this.value ='Submitting...';__doPostBack('BtnSubmit','')"  value="Submit Me!" id="BtnSubmit" />

This gives a nice button disable effect and processing text, while the postback completes.

Answer 5

What if you don't immediately set the button to disabled, but delay that through setTimeout? Your 'disable' function would return and the submit would continue.

Answer 6

Your JavaScript is fine, unless you have other scripts running on this page which may corrupt everything. You may check this using Firebug.

I've now tested a bit and it really seems that ASP.net ignores disabled controls. Basically the postback is issued, but probably the framework ignores such events since it "assumes" that a disabled button cannot raise any postback and so it ignores possibly attached handlers. Now this is just my personal reasoning, one could use Reflector to check this in more depth.

As a solution you could really try to do the disabling at a later point, basically you delay the control.disabled = "disabled" call using a JavaTimer or some other functionality. In this way 1st the postback to the server is issued before the control is being disabled by the JavaScript function. Didn't test this but it could work