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?

Villasenor

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);" />

Shovelnose

When I remove that line it doesn't actually submit. I have this attached to the button but it never calls that function when that line isn't there: this.btnSubmit.Click += new EventHandler(btnSumbit_Click); – Villasenor

Hmm. Can you try adding return true; to the end of your JavaScript block and seeing what happens? – Shovelnose

nope.. that didn't help. The buttons disable and the re-enable and nothing gets submitted. – Villasenor

The button should NOT renable. Are you sure your not posting back? – Southerland

I have no idea where my code would be posting back. I can't find anything that would do that but it is definately re-enabling the button - the page does not refresh though. – Villasenor

I'd need to see more of you code if that didn't fix it. Can you add a more complete example of both the HTML and C# portions? – Shovelnose

I've added some examples that I tried to the question. Thanks for your help – Villasenor

OK, I've expanded the answer with more detail. Let us know if this works. – Shovelnose

That didn't work either. It disables, re-enables, and doesn't submit. I attach the event handler in the OnInit. – Villasenor

It sounds like there is still a server post-back going on independent of the button click handler being fired. I'm not sure what more we could tell you without seeing the full source code. – Shovelnose

Ok, well thanks anyway. I'll look a little further into the code to see if I can find the source of the problem. I appreciate you trying to help. – Villasenor

Answer 2

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.

Vasoconstrictor

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.

Southerland

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());
    }

Ordinarily

Answer 5

Try below code

<asp:Button ID="cmdSubmit" runat="server" Text="Submit" onclick="btnSumbit_Click" OnClientClick="this.style.display = 'none';"/>

Update on 09 Oct 2021:-- Another better solution

<button type="button" class="btn btn-primary btn-lg " id="load1" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Processing Order">Submit Order</button>

$('.btn').on('click', function() {
    var $this = $(this);
  $this.button('loading');
    setTimeout(function() {
       $this.button('reset');
   }, 8000);
});

Maund

Answer 6

Try this:

<asp:Button ID="btn" runat="server" Text="something"  onclick="btn_Click" 
ValidationGroup="V1" onClientClick="if(Page_ClientValidate('V1'))
{this.disabled=true;this.value='Please Wait....';__doPostBack(this.id);}
"UseSubmitBehavior="false"  />

Maryrosemarys

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient reputation you will be able to comment on any post. – Turnstone

@VictorPolevoy - there is code in the answer, but it has not been formatted as such so StackOverflow has hidden it. You can see it by editing the answer. I avoided doing so because it's a low quality answer even with the code; there is no explanation as to what it's doing, etc. – Stork

I've fixed this, however, you should really explain what your code does, how do your solutions work. – Turnstone

Please explain what your code does and why it will solve the problem. An answer that just contains code (even if it's working) usually wont help the OP to understand their problem – Counterstamp