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

Give this a whirl:

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Threading;  public partial class _Default : System.Web.UI.Page  {     protected void Page_Load(object sender, EventArgs e)     {           // Identify button as a 'disabled-when-clicked' button...          WebHelpers.DisableButtonOnClick( buttonTest, 'showPleaseWait' );      }      protected void buttonTest_Click( object sender, EventArgs e )     {         // Emulate a server-side process to demo the disabled button during         // postback.         Thread.Sleep( 5000 );     } }    using System; using System.Web; using System.Web.UI.WebControls; using System.Text;  public class WebHelpers {     //     // Disable button with no secondary JavaScript function call.     //     public static void DisableButtonOnClick( Button ButtonControl )     {         DisableButtonOnClick( ButtonControl, string.Empty );         }      //     // Disable button with a JavaScript function call.     //     public static void DisableButtonOnClick( Button ButtonControl, string ClientFunction )     {            StringBuilder sb = new StringBuilder( 128 );          // If the page has ASP.NET validators on it, this code ensures the         // page validates before continuing.         sb.Append( 'if ( typeof( Page_ClientValidate ) == 'function' ) { ' );         sb.Append( 'if ( ! Page_ClientValidate() ) { return false; } } ' );          // Disable this button.         sb.Append( 'this.disabled = true;' );           // If a secondary JavaScript function has been provided, and if it can be found,         // call it. Note the name of the JavaScript function to call should be passed without         // parens.         if ( ! String.IsNullOrEmpty( ClientFunction ) )          {             sb.AppendFormat( 'if ( typeof( {0} ) == 'function' ) {{ {0}() }};', ClientFunction );           }          // GetPostBackEventReference() obtains a reference to a client-side script function          // that causes the server to post back to the page (ie this causes the server-side part          // of the 'click' to be performed).         sb.Append( ButtonControl.Page.ClientScript.GetPostBackEventReference( ButtonControl ) + ';' );          // Add the JavaScript created a code to be executed when the button is clicked.         ButtonControl.Attributes.Add( 'onclick', sb.ToString() );     } }