How to disable a button after 1st click

Question

I have the following onclick event for a button. once this event is ftonired i want to disable the button. Can anyone help me to understand how to do it?

Here is the code i execute on buttonclick event.

protected void Button3_Click(object sender, EventArgs e)
{

    if (Session["login"] != null && Session["db"] != null)
    {

        digit b = new digit();
        String digitformed = b.formdigit(this.DropDownList1, this.TextBox1, this.TextBox2);

        chekcount c = new chekcount();
        int count = c.getmaxcountforjud_no(digitformed);
        int addtocount = count + 1;

        String name = Session["login"].ToString();
        String databs = Session["db"].ToString();
        String complex_name = name + databs;

        if (DropDownList2.SelectedItem.Text != "New")
        {
            update u = new update();
            u.update1(this.Editor1, digitformed, this.TextBox3, complex_name, name, this.DropDownList2);
            Response.Write(@"<script language='javascript'>alert('Updated')</script>");

        }
        else
        {
            save d = new save();
            d.dosave(this.Editor1, addtocount, digitformed, this.TextBox3, complex_name, name);
            Response.Write(@"<script language='javascript'>alert('Saved')</script>");

        }
    }
    else
    {
        Response.Redirect("log.aspx");
    }
}

Here is the Button which i want to disable.

<asp:Button ID="Button3" runat="server" Text="Save" onclick="Button3_Click" 
                    Visible="False" />

can you be clear on when you want this button to be disabled?client or after server postback — Iman, Dec 12 '11 at 11:10

score 33 · Answer 1 · answered Dec 12 '11 at 11:09

Use the OnClientClick and UseSubmitBehavior properties of the button control.

<asp:Button runat="server" ID="BtnSubmit" 
  OnClientClick="this.disabled = true; this.value = 'Submit in progress...';" 
  UseSubmitBehavior="false" 
  OnClick="BtnSubmit_Click" 
  Text="Click to Submit" />

OnClientClick allows you to add client side OnClick script. In this case, the JavaScript will disable the button element and change its text value to a progress message. When the postback completes, the newly rendered page will revert the button back its initial state without any additional work.

The one pitfall that comes with disabling a submit button on the client side is that it will cancel the browser’s submit, and thus the postback. Setting the UseSubmitBehavior property to false tells .NET to inject the necessary client script to fire the postback anyway, instead of relying on the browser’s form submission behavior. In this case, the code it injects would be:

__doPostBack('BtnSubmit','')

Redered HTML:

<input type="button" name="BtnSubmit" 
  onclick="this.disabled = true; this.value = 'Submitting...';__doPostBack('BtnSubmit','')"
  value="Submit Me!" id="BtnSubmit" />

This should give you the desired behavior.

From: http://encosia.com/disable-a-button-control-during-postback/ Credit: Dave Ward (Twitter: @Encosia)

this should be the best answer since the button will revert back to being enabled after the post back — Pamingkas Sevada, Oct 27 '16 at 02:29
Good answer, but however it doesn't work if I am using ajaxToolkit:ConfirmButtonExtender. — TPG, Jun 11 '20 at 08:36

score 16 · Accepted Answer · answered Dec 12 '11 at 11:02

16

Have you tried?:

protected void Button3_Click(object sender, EventArgs e)
{
   Button3.Enabled = false;
   //rest of code
}

answered Dec 12 '11 at 11:02

Renatas M.

11,694
1
43
62

3

this wouldn't disable the button to the user in their browser, they would still be able to click the button repeatedly uninhibited. – JDPeckham Jul 27 '13 at 21:21

Iman · Answer 3 · 2011-12-12T11:23:49.230

5

<asp:Button  onclick="Button3_Click" ID="Button3" runat="server" Text="Save"
OnClientClick="this.disabled = true; this.value = 'please wait ..';" 
UseSubmitBehavior="false"     />

edited Dec 12 '11 at 11:23

answered Dec 12 '11 at 11:07

Iman

17,932
6
80
90

Dave · Answer 4 · 2011-12-12T11:38:33.850

You'll need to set the Enabled property of the button in the server side code as detailed by other posters. However, if you're trying to prevent multiple submits from the same button, you'll need a slightly different tack.

Add a method to your class:

static void DisableButtonDuringPostback(Page page, Button control)
{
    StringBuilder sb = new StringBuilder();
    sb.Append("this.disabled = true;");
    sb.Append(page.ClientScript.GetPostBackEventReference(control, control.ID.ToString()));
    sb.Append(";");

    control.Attributes.Add("onclick", sb.ToString());

}

In Page_Load add

DisableButtonDuringPostback(this.Page, Button3);

score 2 · Answer 5 · answered Dec 12 '11 at 11:02

See marked code

protected void Button3_Click(object sender, EventArgs e)
{

    ** if (Session["Clicked"] == null)
        Session["Clicked"] = true;
    else
    {
        Button3.Enabled = false;
        return;
    } **


    if (Session["login"] != null && Session["db"] != null)
    {

        digit b = new digit();
        String digitformed = b.formdigit(this.DropDownList1, this.TextBox1, this.TextBox2);

        chekcount c = new chekcount();
        int count = c.getmaxcountforjud_no(digitformed);
        int addtocount = count + 1;

        String name = Session["login"].ToString();
        String databs = Session["db"].ToString();
        String complex_name = name + databs;

        if (DropDownList2.SelectedItem.Text != "New")
        {
            update u = new update();
            u.update1(this.Editor1, digitformed, this.TextBox3, complex_name, name, this.DropDownList2);
            Response.Write(@"<script language='javascript'>alert('Updated')</script>");

        }
        else
        {
            save d = new save();
            d.dosave(this.Editor1, addtocount, digitformed, this.TextBox3, complex_name, name);
            Response.Write(@"<script language='javascript'>alert('Saved')</script>");

        }
    }
    else
    {
        Response.Redirect("log.aspx");
    }
}

score 2 · Answer 6 · answered Dec 12 '11 at 11:11

   ///count number of button click
    var counter = 0;
    function countclickbutton() {
        counter++;
        if (counter > 1) {
            alert("proessing..please wait.");
//do not allow to again click
            return false;
        }
        else {

            return true;
        }
    }

call this onClientClick of button

score 1 · Answer 7 · answered Dec 12 '11 at 11:04

1

if you want to do it by using jquery than

$('#button3').attr("disabled", true);

answered Dec 12 '11 at 11:04

Pranay Rana

175,020
35
237
263

Shouldn't this be $('#button3').attr("disabled", "disabled")? I think it'll work in firefox but not IE... – Dave Dec 12 '11 at 11:19

score 0 · Answer 8 · answered Aug 18 '16 at 14:43

This is an old post, however I don't think it's been fully answered.

Firstly, in ASP.NET WebForms, you submit a HTTP GET request to the web server which handles your request and outputs client-side HTML code for the browser to render.

As you are interacting with a server-side control, values are contained within the hidden VIEWSTATE input field for the properties (such as the boolean for Enabled).

When you click on a button, it sends a HTTP POST request to the web server on the same page. This is why the Page_Load event is fired when you click the button.

Once the HTTP POST request has been dealt with, it will then return HTML code for the browser to re-render. For this reason, if you have the following code in your Page_Load event:

if (Page.IsPostBack) { Button3.Enabled = false; }

It won't display to the user that it's been disabled until the HTTP POST request has been handled and returned the updated client-side code.

From the initial question, it appeared that the server was taking several seconds to return a response, thus multiple postback events could be fired when clicking the button over and over again.

A simple (but annoying) way to solve your problem would be to have a regular HTML button executing a function in JavaScript which disables it and fires the onclick event of a server-side control. The issue with this would then be that when the HTTP POST request returns a response, it would render the regular HTML button as being enabled. To solve this, you can simply disable it in JavaScript using in-line ASP.NET code. Here's an example:

.ASPX File

<button id="clientButton" onclick="javascript:update();" />
<asp:Button ID="serverButton" OnClick="serverButton_OnClick" runat="server" />
<script type="text/javascript">
<% if (Page.IsPostBack) { %>
document.getElementById("clientButton").enabled = false;
<% } %>
function update() {
    document.getElementById("clientButton").enabled = false;
    document.getElementById("<%= serverButton.ClientID %>").click();
}
</script>
<style type="text/css">
#<%= serverButton.ClientID %> {
    visibility: hidden;
    display: none;
}
</style>

.ASPX.CS File

protected void Page_Load(object sender, EventArgs e) 
{
    if (Page.IsPostBack) 
    {
        // Triggered when serverButton has 'javascript:click()' triggered
    }
}

score 0 · Answer 9 · answered Jun 26 '18 at 18:15

0

For WPF applications

Button1.IsEnabled = false;  // Replace Button1 with your button name, false disables button

answered Jun 26 '18 at 18:15

SRIDHARAN

1,196
1
15
35

score 0 · Answer 10 · edited Dec 30 '21 at 00:22

Found this. Works when you are validating input and you don't want a disabled submit button when validation fails.

<asp:Button Text="Submit"
            runat="server" 
            ID="btnSubmit" 
            OnClick="btnSubmit_Click" 
            OnClientClick=" if ( Page_ClientValidate() ) { this.value='Submitting..'; this.disabled=true; }" 
            UseSubmitBehavior="false" />

Source, bottom of this page, by Anonymous.

How to disable a button after 1st click

10 Answers10