Disable button on form submission

Question

I have a button that I would like to disable when the form submits to prevent the user submitting multiple times.

I have tried naively disabling the button with javascript onclick but then if a client side validation that fails the button remains disabled.

How do I disable the button when the form successfully submits not just when the user clicks?

This is an ASP.NET form so I would like to hook in nicely with the asp.net ajax page lifecycle if possible.

Answer 1

I'm not a huge fan of writing all that javascript in the code-behind. Here is what my final solution looks like.

Button:

<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" OnClientClick="doSubmit(this)" />

Javascript:

<script type="text/javascript"><!--
function doSubmit(btnSubmit) {
    if (typeof(Page_ClientValidate) == 'function' && Page_ClientValidate() == false) { 
        return false;
    }    
    btnSubmit.disabled = 'disabled';
    btnSubmit.value = 'Processing. This may take several minutes...';
    <%= ClientScript.GetPostBackEventReference(btnSubmit, string.Empty) %>;    
}
//-->
</script>