Preventing Multiple Button Clicks

This article will demonstrate a way to prevent multiple button clicks on ASP.NET Web Forms. Preventing multiple clicks can help prevent multiple server-side events from firing and thus reduces the chance of duplicate information being saved to the database.

Concept

• Disable a button control on client side.
• After performing some server-side tasks, enable the button from code-behind.

Please Note

In this example, you will need to be using an HTML button instead of ASP.net button.

Markup

<input type="button" id="SaveButton" value="Save" runat="server" onclick="this.disabled=true;" onserverclick="SaveButton_ServerClick" />

 

To Enable Client-Side Validation

If you want to enable client side validation along with the button click, the markup should be 'slightly' changed to.

<input type="button" id="SaveButton" value="Save" runat="server" onclick="if(Page_ClientValidate() == true){this.disabled=true;}" onserverclick="SaveButton_ServerClick" />       

 

Code-behind (Visual Basic)

    Protected Sub SaveButton_ServerClick(ByVal sender As Object, ByVal e As System.EventArgs)

 

        Me.Validate()

 

        If Page.IsValid Then

            '****************************

            'Save information to database.

            '****************************

        End If

 

        If SaveButton.Disabled Then

            SaveButton.Disabled = False

        End If

    End Sub

 

Code-behind (CSharp)

protected void SaveButton_ServerClick(object sender, System.EventArgs e)

{

   

    this.Validate();

   

    if (Page.IsValid) {

    }

    //****************************

    //Save information to database.

    //****************************

   

    if (SaveButton.Disabled) {

        SaveButton.Disabled = false;

    }

}