Click here to Skip to main content
15,881,852 members
Articles / Web Development / ASP.NET
Article

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

Rate me:
Please Sign up or sign in to vote.
3.43/5 (31 votes)
9 Jun 20051 min read 214.5K   903   54   41
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
<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.

VB
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


Written By
Program Manager Microsoft
United States United States
Program Manager Visual Studio

Comments and Discussions

 
GeneralRe: MetaBuilders OneClick Pin
Anonymous4-Aug-05 21:59
Anonymous4-Aug-05 21:59 
GeneralSounds good, but... Pin
koug30-Dec-05 16:01
koug30-Dec-05 16:01 
GeneralRe: Sounds good, but... Pin
thohan9914-Apr-09 13:32
thohan9914-Apr-09 13:32 
GeneralThis *almost* works. Pin
Ashaman17-Jun-05 3:52
Ashaman17-Jun-05 3:52 
GeneralRe: This *almost* works. Pin
kvchowdary13-Apr-07 2:39
kvchowdary13-Apr-07 2:39 
GeneralRe: This *almost* works. Pin
alex4b2-Jul-07 22:39
alex4b2-Jul-07 22:39 
GeneralDoesnt work with validation Pin
Nas Vanchev16-Jun-05 3:03
Nas Vanchev16-Jun-05 3:03 
GeneralRe: Doesnt work with validation Pin
Daniel Walzenbach17-Jun-05 7:00
Daniel Walzenbach17-Jun-05 7:00 
GeneralRe: Doesnt work with validation Pin
Mr President5-Aug-05 9:14
Mr President5-Aug-05 9:14 
GeneralRe: Doesnt work with validation Pin
ralton30-Aug-05 10:03
ralton30-Aug-05 10:03 
QuestionRe: Doesnt work with validation Pin
nbrianc30-Jan-06 20:18
nbrianc30-Jan-06 20:18 
Generala question Pin
PKBoone15-Jun-05 21:29
PKBoone15-Jun-05 21:29 
GeneralOnClientClick Pin
Fredrik Kalseth10-Jun-05 12:39
Fredrik Kalseth10-Jun-05 12:39 
GeneralRe: OnClientClick Pin
Daniel Walzenbach11-Jun-05 3:03
Daniel Walzenbach11-Jun-05 3:03 
GeneralRe: OnClientClick Pin
AnksuNico14-Dec-05 8:11
AnksuNico14-Dec-05 8:11 
GeneralClickOnce Button Pin
Uwe Keim10-Jun-05 6:03
sitebuilderUwe Keim10-Jun-05 6:03 

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

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