Click here to Skip to main content
11,802,442 members (71,140 online)
Click here to Skip to main content

One Click Button Control

, 9 Oct 2006 CPOL 48.2K 513 37
Rate this:
Please Sign up or sign in to vote.
Some users like to click twice or more on the Submit button especially if the postback does not respond immediately. This scenario can bring problems on the server in case, for instance, if the “first click” already disposed some resources. In this article, I am going to discuss one of the solutions


Some users like to click twice or more on the Submit button especially if the postback does not respond immediately. This scenario can bring problems on the server in case, for instance, if the "first click" already disposed some resources in the session state or view state. So the next click will cause an exception. More problems could be caused if the submit button runs some financial transactions. In this case, the system will do more than the user expected.

One of the solutions to this is hiding the button after the first click and giving time to the system to complete the postback. Here is a simple example in JavaScript:

<INPUT onclick="this.disabled = true" type=submit value=Submit />

It works fine for a simple HTML form without ASP.NET whereas implementing this approach on an ASP.NET page will enforce us to consider the ability to assign "hiding the code" of the onclick JavaScript event and running this code if the ASP.NET validation process on the client side is completed successfully. Because, if the validation on the client-side fails, the form does not postback to the server and we do not need to hide the button yet.

You may say that ASP.NET does client-side validation and we do not need to check it manually, but we need to do this before making a decision whether we need to make the postback or not. This small block of code checks if the client side validation is completed successfully:

if (typeof(Page_ClientValidate) == 'function') {
    if (Page_ClientValidate() == false){
        return false;

After that, we can hide the button and even change the button value to, for instance, "Please wait..." to inform the user that the page is posting back to the server.

this.value = 'Please wait...';
this.disabled = true;

To combine all this functionality in to one control, we will use the Button control as a base:

public class OneClickButton : Button
    private string replaceTitleTo;
    public string ReplaceTitleTo
        get { return this.replaceTitleTo; }
        set { this.replaceTitleTo = value; }
    protected override void OnInit(EventArgs e)
        StringBuilder script = new StringBuilder();
        script.Append("if (typeof(Page_ClientValidate) == 'function') { ");
        script.Append("if (Page_ClientValidate() == false) { return false; }} ");
        if (!String.IsNullOrEmpty(this.replaceTitleTo))
            script.Append("this.value = '");
        script.Append("this.disabled = true;");
        this.Attributes.Add("onclick", script.ToString());

I added the property ReplaceTitleTo and check if it is not empty. If yes, I replace the value of the button to change the button title. For example, I can replace the Button control with this one:

<uc:OneClickButton id="butSubmit" 
   ReplaceTitleTo="Please wait..." runat="server" />


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Alexander Kleshchevnikov
Web Developer
Ukraine Ukraine
Alexander is freelance web developer with 4 years experience. He has skills in ASP.NET/MS SQL Server, PHP/MySQL, Ruby On Rails, XHTML, CSS. You can contact with me by Also check my homepage at

You may also be interested in...

Comments and Discussions

GeneralPerfect Solution Pin
koese3-Oct-07 17:51
memberkoese3-Oct-07 17:51 
GeneralGet code! Pin
jgoeke15-Feb-07 9:54
memberjgoeke15-Feb-07 9:54 
Generalit is good but.. Pin
hbn10-Oct-06 4:27
memberhbn10-Oct-06 4:27 
GeneralRe: it is good but.. Pin 22:46 22:46 
GeneralRe: it is good but.. Pin
Extra Gravy13-Sep-07 10:42
memberExtra Gravy13-Sep-07 10:42 
1. The code being rendered to the onclick attribute looked like this:

onclick="if (typeof(Page_ClientValidate) == 'function') { if (Page_ClientValidate('Horiz') == false) { return false; }} this.value = 'Submitting';this.disabled = true;__doPostBack('HorizSubmitButton','');WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("HorizSubmitButton", "", true, "Horiz", "", false, true))"

I think that the undesired addition of WebForm_DoPostBackWithOptions was causing a double submission call when ran within Firefox, although there did not seem to be a double onsubmit event fire within IE.

2. The call to Page.GetPostBackEventReference is depreceated, so I replaced with Page.ClientScript.GetPostBackEventReference.

3. The MSDN documentation on GetPostBackEventReference suggests setting UseSubmitBehavior to false for buttons.

The following code resolves these issues although I am not happy with the way I resolved the first one. Does anyone have any better ideas? If you do, please let me know, I really want to keep the control from rendering code that I'm just commenting out in the browser.

this.UseSubmitBehavior = false;
StringBuilder script = new StringBuilder();
script.Append("if (typeof(Page_ClientValidate) == 'function') { ");
script.Append("if (Page_ClientValidate('");
script.Append("') == false) { return false; }} ");
if (!String.IsNullOrEmpty(this.PostText))
script.AppendFormat("this.value = '{0}';", this.PostText);
script.Append("this.disabled = true;");
script.Append(Page.ClientScript.GetPostBackEventReference(this, String.Empty));
this.OnClientClick = script.ToString();

Thanks again to all the previous posters! I look forward to your improvements and comments.

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
Web02 | 2.8.151002.1 | Last Updated 9 Oct 2006
Article Copyright 2006 by Alexander Kleshchevnikov
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid