Learning never exhausts the mind

Published on by

It is an often overlooked requirement to disable controls on postback during an AJAX postback event to prevent repetitive clicking, a minor problem which can become more serious depending on the action being taken. Payment processing, for example, can result in multiple payments or orders if not handled correctly.

I'll start off with a very basic AJAX form - a single button and an UpdateProgress control and from here we'll loot at how to disable controls on postback.

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdatePanel ID="updPanel1" runat="server">
                <asp:Button runat="server" Text="Submit" ID="btnSubmit" OnClick="btnSubmit_Click"/>
                <asp:UpdateProgress runat="server" ID="ajaxProgress">
                <ProgressTemplate>Please wait...</ProgressTemplate>

I have bound the OnClick event to the btnSubmit_Click which will create a delay of 5 seconds.

protected void btnSubmit_Click(object sender, EventArgs e)

If you create a new AJAX enabled website, copy the above code and run the site you will notice that when you click the button the progress is shown and you can click the button as many times as you want. Depending on your situation this can cause many undesirable effects such as multiple record creating, duplicate payment processing and higher server loads.

This can all be combated using the following Javascript. The only thing you need to do is change the name of the button to whatever you are calling it. You can also add in the name of any other control on the form - text boxes, drop down lists and so on. These will also be disabled while the postback is in progress. Remember to modify both the instances where btnSubmit exists otherwise you may find that your controls do not get enabled again.

(function() {  
  function setupButtonDisablers() {  
  function onPageLoad() {  
     findAndEnable('<%= btnSubmit.ClientID %>'); // Change this
  function onSubmit() {  
     findAndDisable('<%= btnSubmit.ClientID %>'); // Change this
  function findAndDisable(id) {  
     findAndSetDisabledProperty(id, true);  
  function findAndEnable(id) {  
     findAndSetDisabledProperty(id, false);  
  function findAndSetDisabledProperty(id, value) {  
     var control = $get(id);  
     if (control) {  
         control.disabled = value;  

Leave a Reply

Fields marked with * are mandatory.

We respect your privacy, and will not make your email public. Hashed email address may be checked against Gravatar service to retrieve avatars. This site uses Akismet to reduce spam. Learn how your comment data is processed.