Disable Webform button after validation and before postback

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

Hi - I've tried the SO that links to this: http://aspsnippets.com/Articles/Disable-Button-before-Page-PostBack-in-ASP.Net.aspx - but there are postbacks on my page, before the final one - so this solution disables the button on postbacks that are not to do with the final submit action. I've also tried: http://stackoverflow.com/questions/13959256/disable-submit-button-after-one-click-with-validation and other links on SO/Google. — Mark, Jan 23 '13 at 22:34
Please post some code of your attempt and what the error is. What does "other postbacks on my page" mean? How are those relevant to the final button? Are all the buttons active at one time and you only want to disable one on its click event? — MikeSmithDev, Jan 23 '13 at 22:37
You need your other buttons to do callbacks using ajax or javascript..you cant postback your whole page with one button and expect everything to be the same.. — Greg Oks, Jan 23 '13 at 22:42
Hi @MikeSmithDev - I've added code to show what is happening. There are postbacks on other parts of this web form (it's just one page, but gathers information from users, which require postbacks, before the final postback submitting all the information) - thanks again. — Mark, Jan 24 '13 at 09:19

score 3 · Accepted Answer · edited May 23 '17 at 11:56

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.

Thanks a lot - just confirmed there doesn't appear to be a cross-browser solution in this case. Cheers, Mark — Mark, Jan 24 '13 at 16:43

score 2 · Answer 2 · answered Jan 07 '15 at 08:04

You can use the setTimeout trick to disable the button right after the postback is triggered:

<script>
    $("#<%= FinalButton.ClientID %>").click(function ()
    {
        var self = this;
        setTimeout(function ()
        {
            self.disabled = true;
        }, 0);
    });
</script>

score 0 · Answer 3 · answered Oct 10 '19 at 15:02

After searching for hours I found out that you can use UseSubmitBehavior="false" to allow asp postback to handle the button instead of the normal browser submit. You can read the docs here

This also means your OnClientClick script does not have to return true

<asp:Button ID="btnSave" runat="server" 
    Text="Save"
    OnClientClick="this.disabled=true" OnClick="btnSave_Click" 
    UseSubmitBehavior="false"/>

Disable Webform button after validation and before postback

3 Answers3

Linked