aspnet webforms disable button on submit

Question

I have a small problem in Webforms. I'm trying to disable the submit button on submit, to prevent double posts. The problem is, that the onclick method in codebehind is not getting called if the submit button is disabled during postback. Postback still occurs, but the buttons onclick method doesn't get called. Is there a way to get around this?

Here a small demo of the problem:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="WebApplication2._default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-2.0.3.min.js"></script>

    <script>
        function disableButton() {
            //$('#<%=btn.ClientID%>').attr('disabled', 'diabled');
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Literal runat="server" ID="ltrDate" />
        <asp:Button runat="server" ID="btn" OnClientClick="disableButton();" Text="Hit me!" OnClick="Unnamed_Click" />
    </div>
    </form>
</body>
</html>

codebehind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication2
{
    public partial class _default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Unnamed_Click(object sender, EventArgs e)
        {
            Thread.Sleep(1000);
            ltrDate.Text = DateTime.Now.ToString();
        }
    }
}

If this code is run, it works fine, but if the // is removed from the javascript method, the buttons onclick method is not being called anymore. (postback still occurs fine)

/Martin

Update: It seems to be an old issue..

I never got this to work, because when the button is disabled client-side, its information is no longer posted back to the server, so its server-side click event does not fire. I suspect that's the behavior you're seeing. If you do manage to make this work, I'd love to know how. Ian Olsen Wednesday, June 09, 2004

Marquinho Peli · Answer 1 · 2015-01-08T19:47:58.630

A more simple solution:

<asp:Button ID="btnFind" runat="server" Text="Find"
    OnClientClick="if(this.alreadClicked == true) {this.disabled = true;
    this.value = 'Wait...';} else {this.alreadClicked = true;}" EnableViewState=false
</asp:Button>

You disable the button anyway and also give the user a feedback "Wait...", but must use EnableViewState=false so the button reset to it's original state when the page refresh.

score 2 · Answer 2 · answered Sep 26 '13 at 10:03

Ok.. I found the answer :) The trick is to use Page.GetPostBackEventReference(btn). The method will insert a call to dopostback, and the right events will be fired. The easy solution is to just insert that line after the javascript line that disables the button. Then it'll work, but if you have client side validation, that wont work. (Or, it'll work, but the submit button will be disabled if the user forgot to enter the required information).

Here's the demo from my original question edited to use client validation, and with the disabeling of the submit button on postback:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="WebApplication2._default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-2.0.3.min.js"></script>

    <script>
        $(function () {
            if (typeof ValidatorUpdateDisplay != 'undefined') {
                var originalValidatorUpdateDisplay = ValidatorUpdateDisplay;

                ValidatorUpdateDisplay = function (val) {
                    originalValidatorUpdateDisplay(val);

                    //Bind();
                    if (val.isvalid) {
                        $('#<%=btn.ClientID%>').attr('disabled', 'disabled');
                        <%=Page.GetPostBackEventReference(btn)%>
                    }
                }
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager runat="server" />
    <div>
        <asp:TextBox runat="server" ID="txtFirstname" />
        <asp:RequiredFieldValidator runat="server" ControlToValidate="txtFirstname" Display="Dynamic" EnableClientScript="true" ErrorMessage="Please enter your firstname" />
        <br />
        <asp:Literal runat="server" ID="ltrDate" />
        <br />
        <asp:Button runat="server" ID="btn" Text="Hit me!" OnClick="Unnamed_Click" />
    </div>
    </form>
</body>
</html>

Codebehind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication2
{
    public partial class _default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Unnamed_Click(object sender, EventArgs e)
        {
            Thread.Sleep(1000);
            ltrDate.Text = DateTime.Now.ToString();
        }
    }
}

Your answer got me part-way there :) In my client-side validation function, after disabling the button I ended up calling: ClientScript.GetPostBackEventReference(btnSubmit,""); (Apparently is newer way to go?) Is working though, without breaking the existing validation. — Troy Chard, Jun 20 '14 at 00:58

aspnet webforms disable button on submit

2 Answers2

Linked