Question

Using WebForms, how can I have a button, which is disabled, after only IT has been clicked, and also AFTER validation has been passed?

I know there is: Disable asp.net button after click to prevent double clicking

However, there are other postbacks on my page, before the final button press which confirms the booking, and I need these to be allowed.

It’s only the final button press that I need to ensure passes validation, but only allows one press, before being disabled.

Code is as follows:

   protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        FinalButton.Attributes.Add("onclientclick", "if(Page_ClientValidate('vg')){this.disabled = true; }");
    }

}
protected void Button1_Click(object sender, EventArgs e)
{
    TextBox1.Text = "Hi";
}
protected void Button3_Click(object sender, EventArgs e)
{
    TextBox1.Text = "";
}

ASPX page:

 <p>
    <asp:TextBox ID="TextBox1" runat="server" ValidationGroup="vg"></asp:TextBox>
</p>
<p>
    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Set TextBox1 to Hi" />
    <asp:Button ID="Button3" runat="server" OnClick="Button3_Click" Text="Set TextBox1 to Empty" />
</p>
<p>
    <asp:Button ID="FinalButton" runat="server" Text="Final Submit" ValidationGroup="vg" />
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1" ErrorMessage="RequiredFieldValidator" ValidationGroup="vg"></asp:RequiredFieldValidator>
</p>

So, the unless the textbox is populated, the “FinalButton” should not submit (this part works). However, if the textbox is populated, then it should be disabled to prevent double clicks, before posting back – but it doesn’t disable, so I presume my code here, is not correct:

FinalButton.Attributes.Add("onclientclick", "if(Page_ClientValidate('vg')){this.disabled = true; }");

The source on the page when it is rendered, shows the button as:

<input type="submit" name="ctl00$MainContent$FinalButton" value="Final Submit" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$FinalButton&quot;, &quot;&quot;, true, &quot;vg&quot;, &quot;&quot;, false, false))" id="MainContent_FinalButton" onclientclick="if(Page_ClientValidate(&#39;vg&#39;)){this.disabled = true; }" />

Thank you,

Mark

Answer 1

You can see in the rendered button HTML your single quotes are getting changed to ', which is an ASP.NET security feature. Some posts on SO (like Stop the tag builder escaping single quotes ASP.NET MVC 2) have posted away to get around this, but I personally would NOT take that route.

Note, for both of these examples I added a return false to stop the form submission so you can see the button actually disable. Remove this when you are ready to continue testing your code.

You can either just put your code in the button itself:

<asp:Button ID="FinalButton" runat="server" OnClientClick="if(Page_ClientValidate('vg')){this.disabled = true; return false; }" Text="Final Submit" ValidationGroup="vg" />

This works, but looks nasty. It’s cleaner to not have that OnClientClick just add the click event with Javascript:

<script>
    $("#<%= FinalButton.ClientID %>").click(function () {
        if (Page_ClientValidate('vg')) {
            this.disabled = true; return false;
        }
    });
</script>

Ok so once you see that working, and you remove the return false;, you are still going to have issues. Namely that a disabled button doesn’t perform a postback in certain browsers. So some browsers will postback, others will act just like it did with the return false;. That’s not good.

What is worse is regardless of the browser, ASP.NET is not going to run the click event of a disabled button (if you add something like OnClick="FinalButton_Click" to the button). You can test this out in IE9, since a disabled button will still post back, but you can see your OnClick event won’t fire. Chrome on the other hand will just disable your button and not postback.