RepeatHost Business Hosting

Reply to comment

Disable Button on Submit (Prevent multiple submits)

Submitted by Ben Hodson on Mon, 07/14/2008 - 16:21

When a user clicks a button on a web page that submits the page (or does an AJAX asynchronous submit), depending on the load on the server and latency, the user may have to wait upwards of many seconds in order for the process to complete. During the time, a user may think something has not worked and may attempt to click the button again, even multiple times. If you are doing complex operations, it could cancel these actions and start over. Worse yet, if you are inserting items in a database, it could cause duplicate entries or other concurrency issues.

Here is a way to set up an ASP.NET button to be disabled when it is clicked and re-enable itself after the postback operations complete. I will show an example using a standard ASP.NET postback and the newer AJAX-based asynchronous post back that only causes a partial page update.

NOTE: This has been tested in IE7, IE6, Firefox 2, and Safari 3.

First, add the following javascript to your page:

<script language="javascript" type="text/javascript">
    // disables the button specified and sets its style to a disabled "look".
    function disableButtonOnClick(oButton, sButtonText, sCssClass)
    {
        // set button to disabled so you can't click on it.
        oButton.disabled = true; 
        // change the text of the button.
        oButton.value = sButtonText; 
        // IE uses className for the css property.
        oButton.setAttribute('className', sCssClass); 
        // Firefox, Safari use class for the css property.  (doesn't hurt to do both).
        oButton.setAttribute('class', sCssClass);
    }
</script>

There are a couple of things to note in the javascript. The button is set to disabled state. The value of the button text is changed to make it even more obvious that the button was clicked and is processing. We have to set both the "className" and "class" attributes so this will work in IE, Safari, and Firefox correctly.

Next, add the following CSS style property:

<style type="text/css">
    /* Some browsers don't make it obvious that a button is disabled so set this css class
    to make the button obvious that it is grayed out and disabled. */
    .disabled_button
    {
        color:#aca899;
        background-color:#efefef;
        border:solid 1px #c0c0c0;
    }
</style>

This CSS is optional but some browsers don't make it obvious that a button is disabled even when you set the disabled property so I like to change the CSS property to make it more noticeable. Also, if you are using a custom style on your buttons, you will definitely need this because setting to disabled will not change your custom CSS properties to a "grayed-out" state.

We will add a button that posts normally, and we will add a button that is wrapped in an ASP.NET AJAX UpdatePanel so that it causes a partial page postback. Add the following HTML to your page:

<!-- This does a full page postback and sets the textbox to the current date/time. -->
Date of Submit: <asp:TextBox ID="txtDateSubmit" runat="server"></asp:TextBox>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" onclick="btnSubmit_Click" />
 
<br />
<br />
<br />
 
<!-- Wrapping in an UpdatePanel causes this section to do a partial page postback.
This sets the textbox to the current date/time without posting back the entire page. -->
<asp:UpdatePanel ID="UpdatePanelSubmitAsync" runat="server">
    <ContentTemplate>
        Date of Submit (Asynchronous): <asp:TextBox ID="txtDateSubmitAsync" runat="server"></asp:TextBox>
        <asp:Button ID="btnSubmitAsync" runat="server" Text="Submit Async" onclick="btnSubmitAsync_Click" />
    </ContentTemplate>
</asp:UpdatePanel>

Now add the following C# code to the page's code behind:

protected void Page_Load(object sender, EventArgs e)
{
    // set up button client click event.
    // PostBackOptions allows us to get the ASP.NET postback options for the control specified.
    PostBackOptions optionsSubmit = new PostBackOptions(btnSubmit);
    // set the OnClientClick to call our disableButtonOnClick javascript function.  We do this in the 
    // code behind instead of the HTML design view because we may want to localize this string and 
    // we need to get a reference to the post back event for this button.
    // The reason we need a reference to the postback event is because when you set a button's css 
    // style property to disabled, it automatically cancels the submit action so we need to make sure 
    // the button still runs it's submit action after we disable the button.
    btnSubmit.OnClientClick = "disableButtonOnClick(this, 'Please wait...', 'disabled_button'); ";
    btnSubmit.OnClientClick += ClientScript.GetPostBackEventReference(optionsSubmit);
    
    // do the same for the asynchronous postback button.
    PostBackOptions optionsSubmitAsync = new PostBackOptions(btnSubmitAsync);
    btnSubmitAsync.OnClientClick = "disableButtonOnClick(this, 'Please wait...', 'disabled_button'); ";
    btnSubmitAsync.OnClientClick += ClientScript.GetPostBackEventReference(optionsSubmitAsync);
}
 
protected void btnSubmit_Click(object sender, EventArgs e)
{
    // simulate load on the web server for 2 seconds.
    System.Threading.Thread.Sleep(2000);
 
    // set textbox to the current date/time so we can verify things are working correctly.
    txtDateSubmit.Text = DateTime.Now.ToString();
}
 
protected void btnSubmitAsync_Click(object sender, EventArgs e)
{
    // simulate load on the web server for 2 seconds.
    System.Threading.Thread.Sleep(2000);
 
    // set textbox to the current date/time so we can verify things are working correctly.
    txtDateSubmitAsync.Text = DateTime.Now.ToString();
}

We put the OnClientClick event setup in the Page_Load() event so that it is re-set up each time the page is submitted. Also, this allows us to get access to the GetPostBackEventReference() method which gives us a dynamic way of getting the control's submit behaviour. When you set an HTML submit button to disabled, it automatically cancels the submit action so we have to call the ASP.NET PostBack event manually in order to make the post occur.

Now run the page. When you click the buttons, they should be disabled (not clickable) until the threading sleep ends and the page returns the resp

Reply