How to disable asp.net ImageButton that is wired to server event (so it can't get re-posted)

Question

I have an asp.net ImageButton -- with an OnClick event that another developer originally coded. It looks like this:

<asp:ImageButton ID="ImageButtonSaveAddress" runat="server" ImageUrl="btnSave.gif" OnClick="ImageButtonSaveAddress_Click" />

In the code behind, the event code looks like this ...

    protected void ImageButtonSaveAddress_Click(object sender, ImageClickEventArgs e)
    {
       if (this.SaveAddressBook())
       {
          this.RedirectToAddressBook();
       }
    }

I would like to do 2 things. Part 1) disable the image button so it can't be resubmitted and Part 2) I would like to change the src of the imagebutton to a new "grayed out" button (to visually alert the user that the button has been pressed).

I was trying to do both Parts 1 & 2 with javascript (jQuery). Like this.

$j(".disable-submit").click(function() {
    // replace the image
    var $this = $j(this).attr("src", imgPathSaveBtnDisabled).addClass('wait-cursor');

    // disable button from getting click again 
    // (this doesn't work, it just causes the page to stop)
    return false;
});

It definitely feels like I'm going about this wrong.

Answer 1

have you tried $this.attr('disabled','disabled'); before return false;? and remove return false;

returning false cause the default event for that element to stop - in your example, the submit.

it would look like this,

$j(".disable-submit").click(function() {
    // replace the image
    var $this = $j(this).attr("src", imgPathSaveBtnDisabled).addClass('wait-cursor');

    // disable button from getting click again 
    $this.attr('disabled','disabled');
});

Answer 2

I needed to do the exact same thing recently (stop double-clicks - aka double form posts, and grey out button).

I chose to create a control inhheriting for the ASP.NET Server Side button, overriding the "OnClientClick" event to disable on click, but preserve the existing postback behaviour (including validation).

Have a look:

http://stackoverflow.com/questions/3527634/asp-net-custom-button-control-how-to-override-onclientclick-but-preserve-existi

Originally i was doing what you are trying to do (do it all with JavaScript), but the problem with that is you lose the existing postback behaviour and page validation. You'll need custom code on every button.

The above way is a re-usable server control that can be dropped onto any page you want, without any further configuration.

I'm using it on my live website and works perfectly.

That's a Button control, but can be also be applied to a LinkButton - as they both define a OnClientClick virtual method.

HTH.