ClickOnce JavaScript

Introduction

Many times, a developer wants the clicking of one button on the screen to disable the other buttons on the screen to prevent multiple submissions. Attached is some JavaScript that provides this feature.

Using the Code

Over the internet, there are several ways to prevent multiple button clicks in ASP.NET, this is just another way to do it.  Click here in order to see a server side control doing a similar thing that this JavaScript is doing.

<script language="JavaScript">
<!--
        /// <summary> 
        /// This function disables the submission buttons on the page 
        /// after checking to see if the page's validators are valid.  
        /// If they are not, then the changes don't take place.  
        /// The purpose of this method is to prevent the user from having 
        /// multiple submissions by clicking rapidly on the same button.
        /// </summary>
        function DisableButtonClick(valGroup) {
            // Start the validation false
            var cont = false;

            // Check to see if the page has Validators to fire
            if (typeof Page_ClientValidate != "undefined") {
                // There are validators available, 
	       // so fire them based on the ValidationGroup passed in
                cont = Page_ClientValidate(valGroup);
            }
            else {
                // There are no validators to fire, just disable the buttons
                cont = true;
            }
            // Only continue if the validators are valid or 
	   // there are no validators on the page
            if (cont) {
                // Find a button, and if it exists on this page, then disable it
                var btn = document.getElementById('<%= BtnSaveGeneral.ClientID %>');
                if (btn != null) {
                    btn.disabled = true;
                    btn.value = 'Saving...';
                }
            }
        }
-->
    </script>

Usage of this would be inline in HTML.

<asp:Button ID="BtnSave" runat="server" Text="Save" OnClick="BtnSaveGeneral_Click"
       	OnClientClick="DisableButtonClick('Save');" 
	UseSubmitBehavior="false" ValidationGroup="Save" />

Or in the code behind by changing the "onclientclick" attribute to the button.

BtnSave.Attributes.Add("onclientclick", "DisableButtonClick('Save');
BtnSave.UseSubmitBehavior = false;

Set the UseSubmitBehavior to false so ASP.NET will render JavaScript to allow the Button_Click event to fire on the server even though the JavaScript disables the button.

You can send in a blank ValidationGroup too if you want, by sending in an empty string.

Points of Interest

This JavaScript function explicitly names the buttons to clear inside the function.  Other options would be to pass into the function the buttons to disable when you call the OnClientClick, or to register each button that you wish to disable into an array and iterate through the array of names, disabling each control found.

History

• 25^th June, 2009: Initial post