Disable button after submit

Question

I'm trying to disable a button when a user submits a payment form and the code to post the form is causing a double post in firefox. This problem does not occur when the code is removed, and does not occur in any browser other than firefox.

Any idea how to prevent the double post here?

System.Text.StringBuilder sb = new StringBuilder();
sb.Append("if (typeof(Page_ClientValidate) == 'function') { ");
sb.Append("if (Page_ClientValidate() == false) { return false; }} ");
sb.Append("this.value = 'Please wait...';");
sb.Append("this.disabled = true;");
sb.Append(Page.GetPostBackEventReference(btnSubmit ));
sb.Append(";");
btnSubmit.Attributes.Add("onclick", sb.ToString());

it's the sb.Append(Page.GetPostBackEventReference(btnSubmit )) line that's causing the issue

Thanks

EDIT: Here's the c# of the button:

<asp:Button ID="cmdSubmit" runat="server" Text="Submit" />

here's the html

This code posts twice (and disables the submit button and verifies input):

<input type="submit" name="ctl00$MainContent$cmdSubmit" value="Submit" onclick="if (typeof(Page_ClientValidate) == 'function') { if (Page_ClientValidate() == false) { return false; }} this.value = 'Please wait...';this.disabled = true;document.getElementById('ctl00_MainContent_cmdBack').disabled = true;__doPostBack('ctl00$MainContent$cmdSubmit','');" id="ctl00_MainContent_cmdSubmit" />

This code posts twice (but doesn’t disable the submit button):

<input type="submit" name="ctl00$MainContent$cmdSubmit" value="Submit" onclick="__doPostBack('ctl00$MainContent$cmdSubmit','');" id="ctl00_MainContent_cmdSubmit" />

This code posts once (but doesn’t verify the user input and doesn’t disable the submit button):

<input type="submit" name="ctl00$MainContent$cmdSubmit" value="Submit" id="ctl00_MainContent_cmdSubmit" />

This code posts once (but doesn’t disable submit button):

<input type="submit" name="ctl00$MainContent$cmdSubmit" value="Submit" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$cmdSubmit&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="ctl00_MainContent_cmdSubmit" />

This code doesn’t post at all:

<input type="submit" name="ctl00$MainContent$cmdSubmit" value="Submit" onclick="this.disabled = true;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$cmdSubmit&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="ctl00_MainContent_cmdSubmit" />

Obviously it’s the disabling of the submit button that’s posing the problem. Do you have any ideas how we can disable the submit to avoid multiple clicking?

Answer 1

Presumably, btnSubmit already has a server-side event hooked up. If so, the call to Page.GetPostBackEventReference should not be necessary. You should get your desired behavior simply by removing that line.

Update: You mentioned attaching the event handler in C# code, but you don't mention where you do that. I'm guessing it's in the Page_Load handler. If that is the case, it wouldn't work properly, as it's too late to hook up a button click event handler at that point. Let's try this instead.

First, it would be cleaner to put the JS into it's own function rather than building it in the C# code-behind. I suggest that you put it into a script block (or better yet, it's own .js file.)

function disableOnSubmit(target)
{
    if (typeof(Page_ClientValidate) == 'function') {
        if (Page_ClientValidate() == false) { return false; }
    }
    target.value = 'Please wait...';
    target.disabled = true;
    return true;
}

And for your ASPX button, try this:

<asp:Button ID="cmdSubmit" runat="server" Text="Submit" onclick="btnSumbit_Click" OnClientClick="return disableOnSubmit(this);" />

Answer 2

See this answer...

http://stackoverflow.com/questions/106509/disable-button-on-form-submission#106958

Answer 3

Take that line out, the form will already submit because it is a submit button, not a regular button type, take a look at how ASP.NET renders the element out.

Page validators are called in the form.onsubmit callback, so if your page is not valid, it will be validated there.

So, just remove that line and you'll be set.

Answer 4

private void checkButtonDoubleClick(Button button)
    {
        System.Text.StringBuilder sbValid = new System.Text.StringBuilder();
        sbValid.Append("if (typeof(Page_ClientValidate) == 'function') { ");
        sbValid.Append("if (Page_ClientValidate() == false) { return false; }} ");
        sbValid.Append("this.value = 'Please wait...';");
        sbValid.Append("this.disabled = true;");
        sbValid.Append(this.Page.ClientScript.GetPostBackEventReference(button, ""));
        sbValid.Append(";return false;");
        button.Attributes.Add("onclick", sbValid.ToString());
    }

Answer 5

The answer is the add a return false; after your last line ;

for example

sbValid.Append(this.Page.ClientScript.GetPostBackEventReference(button, "")); 
sbValid.Append(";");

must be sbValid.Append(this.Page.ClientScript.GetPostBackEventReference(button, "")); sbValid.Append(";return false;");

this definitely worked for me.