OnclientClick and OnClick is not working at the same time?

Question

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.

Threephase

Can you show us your disable function? – Jeremyjerez

Can you post your disable() Javascript method? – Motile

what does the disable js function look like? When you call disable(this)...I'm assuming its the usual but want to make sure – Nilsanilsen

function disable(control) { control.disabled="disabled"; alert(100); } – Threephase

Answer 1

From this article on web.archive.org :

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.

Plurality

This is the correct answer. You should edit your answer to include the information from the article. (UseSubmitBehavior="false") – Jeremyjerez

@Sam, my answer to the question was link to the article but was asked by others on SO to include content. Anyways have included the link. Thanks – Plurality

@VinayPandey, you're welcome! I still think the formatting of your answer doesn't make it very clear that you're quoting someone else. I've suggested an edit to the answer to show you what I mean. – Brioche

A disadvantage of this approach is that the button no longer works when JavaScript is disabled or unavailable. – Brioche

@Sam, thanks for the edit, is there way to do the same without javascript? – Plurality

@VinayPandey, no problem. Yes; see my answer for an example. – Brioche

It looks to me, btw, that for VB.NET you don't need to set the OnClick event, because you have the Handles keyword on the event handler sub in the codebehind. – Mako

Which event will be called first 'onClick' or 'onClientClick' ? – Tailspin

if you choose to add confirmation do something like this. <asp:Button ID="btn" runat="server" Text="Button" OnClientClick="if (confirm('Are you sure you want to proceed?')){ this.disabled = true; this.value = 'Processing Request...';} else {return false;}" UseSubmitBehavior="false" OnClick="btn_Click" CausesValidation="False" /> – Pease

@PPB onClientClick fires first. – Flowerless

Answer 2

OnClientClick seems to be very picky when used with OnClick.

I tried unsuccessfully with the following use cases:

OnClientClick="return ValidateSearch();" 
OnClientClick="if(ValidateSearch()) return true;"
OnClientClick="ValidateSearch();"

But they did not work. The following worked:

<asp:Button ID="keywordSearch" runat="server" Text="Search" TabIndex="1" 
  OnClick="keywordSearch_Click" 
  OnClientClick="if (!ValidateSearch()) { return false;};" />

Otto

This produces SyntaxError: Unexpected token if Shouldnt there be a javascript protocol on the front of that? – Amortizement

Works fine. thanks ! Js function should return true on successful validation otherwise OnClick with not be hit. – Desolate

Simply a clean, beautiful and working solution for Webforms newbies :) thanks Garry – Bob

This is just bizarre that this works! But it does. Thank you! – Foliage

I'm not sure as well why did this worked compare to the previous syntax. This also helped me. – Helot

Answer 3

There are two issues here:

Disabling the button on the client side prevents the postback

To overcome this, disable the button after the JavaScript onclick event. An easy way to do this is to use setTimeout as suggested by this answer.

Also, the OnClientClick code runs even if ASP.NET validation fails, so it's probably a good idea to add a check for Page_IsValid. This ensures that the button will not be disabled if validation fails.

OnClientClick="(function(button) { setTimeout(function () { if (Page_IsValid) button.disabled = true; }, 0); })(this);"

It's neater to put all of this JavaScript code in its own function as the question shows:

OnClientClick="disable(this);"

function disable(button) {
    setTimeout(function () {
        if (Page_IsValid)
            button.disabled = true;
    }, 0);
}

Disabling the button on the client side doesn't disable it on the server side

To overcome this, disable the button on the server side. For example, in the OnClick event handler:

OnClick="Button1_Click"

protected void Button1_Click(object sender, EventArgs e)
{
    ((Button)sender).Enabled = false;
}

Lastly, keep in mind that preventing duplicate button presses doesn't prevent two different users from submitting the same data at the same time. Make sure to account for that on the server side.

Brioche

Can the down-voters please let me know what's wrong? If I'm wrong, I would like to know so I can remove this answer and learn from my mistakes. Or if you just don't understand my code or the reasoning behind it, please ask. In the latter case, you're doing a disservice to the community by down-voting good advice. – Brioche

This was the best explanation of the root cause and reasoning behind the very helpful workaround. – Caulicle

Answer 4

Vinay (above) gave an effective work-around. What's actually causing the button's OnClick event to not work following the OnClientClick event function is that MS has defined it where, once the button is disabled (in the function called by the OnClientClick event), the button "honors" this by not trying to complete the button's activity by calling the OnClick event's defined method.

I struggled several hours trying to figure this out. Once I removed the statement to disable the submit button (that was inside the OnClientClick function), the OnClick method was called with no further problem.

Microsoft, if you're listening, once the button is clicked it should complete it's assigned activity even if it is disabled part of the way through this activity. As long as it is not disabled when it is clicked, it should complete all assigned methods.

Meares

here, here! Microsoft, follow standards dab nabbit! – Shortwinded

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.

Claudie

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

Sheela

Answer 7

function UpdateClick(btn) {

    for (i = 0; i < Page_Validators.length; i++) {

        ValidatorValidate(Page_Validators[i]);

        if (Page_Validators[i].isvalid == false)

            return false;
    }

    btn.disabled = 'false';

    btn.value = 'Please Wait...';

    return true;
}

Chicane