Click here to Skip to main content
Click here to Skip to main content

The amazing ASP.NET "One Time Only Clickable" Button

, 9 Jun 2005
Rate this:
Please Sign up or sign in to vote.
A button which gets disabled during postback and can therefore only be clicked once.

Picture of the Button Control

Introduction

There often comes the time when you want to prevent your users from hitting a submit button on your page twice (or whatever times they think is appropriate). As we all know there unfortunately is no "built-in" functionality to archive this behavior.

Background

The idea is basically quite simple. When somebody clicks a button (we will use an <asp:button /> for the following example), a client side JavaScript function is called which disables the button and submits the page. After the page gets submitted (Page.IsPostBack = True), the server side method assigned to the button should fire and persist the user's input. Unfortunately it’s not that easy. If the button is disabled before the page gets submitted, the server side method assigned to the button does not fire. This is because the “Name/Value pair” of the button is not incorporated in the “Form Collection” of the page if the button is disabled. The trick is to disable the button after the page gets submitted and here is how it’s done.

Using the code

This is how the code in the .aspx page looks like. To allow you to simply copy & paste the code, I included everything within <HTML />.

<HTML>
    <HEAD>
        <title>One Time Clickable Button</title>
        <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
        <meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
        <meta name="vs_defaultClientScript" content="JavaScript">
        <meta name="vs_targetSchema" 
           content="http://schemas.microsoft.com/intellisense/ie5">
        <script language="javascript">
        <!--

            function DisableButton() {
                document.forms[0].submit();
                window.setTimeout("disableButton('" + 
                   window.event.srcElement.id + "')", 0);
            }

            function disableButton(buttonID) {
                document.getElementById(buttonID).disabled=true;
            }

        //-->
        </script>
    </HEAD>
    <body>
        <form id="Form1" method="post" runat="server">
            <asp:Button ID="btnSave" Text="Save" Runat="server"></asp:Button>
        </form>
    </body>
</HTML>

The same applies to the code-behind file. The purpose of System.Threading.Thread.Sleep(5000) is simply to emulate a long running save operation, calculation, etc.

Private Sub Page_Load(ByVal sender As System.Object, _
               ByVal e As System.EventArgs) Handles MyBase.Load
    btnSave.Attributes.Add("onclick", "DisableButton()")
End Sub

Private Sub btnSave_Click(ByVal sender As Object, _
            ByVal e As System.EventArgs) Handles btnSave.Click
    System.Threading.Thread.Sleep(5000)
    Response.Write("Page has been saved.")
End Sub

Have fun!

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Daniel Walzenbach
Program Manager Microsoft
United States United States
Program Manager Visual Studio

Comments and Discussions

 
Questionhow to do this in asp.net C# Pinmembertelme12-Oct-11 2:12 
QuestionEasier way and no javascript require - use postback reference PinmemberPatrick_SURFThru12-Jul-11 4:13 
GeneralRe: Easier way and no javascript require - use postback reference Pinmemberstevefortner6-Sep-11 10:21 
Generalworks great! PinmemberSteve Gagliardo2-Feb-11 5:19 
GeneralMy vote of 5 PinmemberEricFaust7-Sep-10 6:08 
GeneralA solution that works with both IE and Firefox PinmemberTareman27-Feb-09 7:39 
GeneralRe: A solution that works with both IE and Firefox Pinmemberthohan9914-Apr-09 14:27 
GeneralNot really compatible with ASP.NET Pinmemberjohram4-Sep-08 23:28 
GeneralIt dosent work on fire fox - please help Pinmemberlavanyaashna047-Jun-08 9:21 
GeneralRe: It dosent work on fire fox - please help Pinmemberthohan9914-Apr-09 14:15 
GeneralRe: It dosent work on fire fox - please help PinmemberDavidLieu29-Apr-10 12:49 
GeneralThanks for the code Pinmemberjamezu20-May-08 16:42 
QuestionBrowser problem PinmemberEbyZ_Dotnet11-Sep-07 21:41 
GeneralTHANKS A LOT!!!!! Pinmemberricparas6-Aug-07 18:04 
QuestionBrowser issue Pinmemberkvchowdary15-Apr-07 3:38 
GeneralIncredible Pinmemberundercover74710-May-06 11:20 
GeneralRe: Incredible Pinmemberthemosk12-May-06 10:32 
Generalexcellent article Pinmemberyameen29-Oct-05 20:01 
GeneralRe: excellent article PinmemberDaniel Walzenbach11-Nov-05 4:29 
Generalthis rocks ! PinsussAnonymous29-Sep-05 15:18 
Generaldisabling all buttons &amp; client callbacks Pinmemberthemastuh27-Aug-05 7:16 
GeneralAnother much easier way Pinmembernmg1965-Aug-05 3:33 
GeneralAn idea... PinmemberFredrik Kalseth4-Aug-05 23:34 
GeneralMetaBuilders OneClick Pinmembermikejh994-Aug-05 5:20 
GeneralRe: MetaBuilders OneClick Pinmemberknapi4-Aug-05 22:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.141223.1 | Last Updated 10 Jun 2005
Article Copyright 2005 by Daniel Walzenbach
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid