ansaurus

Question

Why doesn't my form post when I disable the submit button to prevent double clicking?

Answer 1

+4 A:

"Disabling" HTML controls doesn't always produce consistent behavior in all major browsers. So I try to stay away from doing that on the client-side, because (working with the ASP.NET model) you need to keep track of element's state on client and server in that case.

What I'd do is move button off the visible part of the window by switching the button's className to a CSS class that contains the following:

.hiddenButton
{
  position: absolute;
  top: -1000px;
  left: -1000px;
}

Now, what to put in place of the button?

Either an image that looks like a disabled button
Or just plain text that says "Please wait..."

And this can be done the same way but in reverse. Start with the element being hidden at page load and then switch to a visible className on form submit.

Kon 2008-12-30 15:54:51

Answer 2

A:

For debugging purposes, what happens if you put an else clause against the if(chk.checked)?

Neil Barnwell 2008-12-30 16:01:52

Hi Neil, I'm not sure I follow you, but if you are suggesting I reenable the button, it won't work with a simple else, since once it's disabled it can't be clicked. I'd need to create a checkbox click event to reenable it, and I wanted to keep things as simple as possible. Is that what you meant?

John MacIntyre 2008-12-30 16:06:21

No, I'm wondering if the reason it doesn't work because the chk,checked might not be returning true, hence the button isn't disabled.

Neil Barnwell 2008-12-30 19:33:46

Oh ok. No it is definitely disabling the button, but then doesn't submit the post. Thanks again.

John MacIntyre 2008-12-30 22:33:55

Answer 3

+3 A:

fallen888 is right, your approach doesn't work cross-browser. I use this little snippet to prevent double-click.

Mauricio Scheffer 2008-12-30 16:08:13

Answer 4

+3 A:

I think you're just missing this tag:

UseSubmitBehavior=”false”

Try it like this:

<asp:Button ID=”btnUpdate” runat=”server” UseSubmitBehavior=”false” OnClientClick=”if(Page_ClientValidate()) { this.disabled = true; } else {return false;}” Text = “Update” CssClass=”button” OnClick=”btnUpdate_Click” ValidationGroup=”vgNew”/>

Explaination

Echostorm 2008-12-30 16:19:03

Thanks, this does work. But where UseSubmitBehaviour turns off the default browser form posting, and uses the ASP.NET form posting, I'm kind of nervous about a MS specific technique instead of the conventional way of doing things. Do you know if there are any repercussions to using this? thx again

John MacIntyre 2008-12-30 22:38:31

none that I've seen. Glad to help

Echostorm 2009-01-05 12:33:04

This has worked perfectly in my solutions. Thanks Echostorm.

jwalkerjr 2010-06-11 05:43:51

Answer 5

+1 A:

document.getElementById('form1').onsubmit = function() {
    document.getElementById('btn').disabled = true;
};

I.devries 2008-12-30 16:30:00

This does not work and is the code the user was asking to fix. -1

Hogan 2009-12-15 18:15:04

no, this is on the onsubmit of the form instead of the onclick of the button. This way it WILL submit the form. But thanks for the downvote

I.devries 2009-12-16 07:14:15

Answer 6

A:

Make sure that your javascript function returns true (or a value that would evaluate to boolean true), otherwise the form won't get submitted.

function btn_click()
var chk = document.getElementById("chk");
    if(chk.checked)
    {
            var btn = document.getElementById("btn");
            btn.disabled = true;
            return true;   //this enables the controls action to propagate
    }
    else    return false;  //this prevents it from propagating
}

tj111 2008-12-30 16:47:51

Thanks tj111, but I dont' think the event bubbling is being interupted, since it does postback until I check the button.

John MacIntyre 2008-12-30 16:59:42

I ran into the same problem and my first try was this solution. It didn't work on IE, however. I had to go with the solution Vatos explained, i.e. form submit instead of button click.

OregonGhost 2009-05-14 08:51:31

Answer 7

+3 A:

UseSubmitBehavior="false" converts submit button to normal button (<input type="button">). If you don't want this to happen, you can hide submit button and immediately insert disabled button on its place. Because this happens so quickly it will look as button becoming disabled to user. Details are at the blog of Josh Stodola.

Code example (jQuery):

$("#<%= btnSubmit.ClientID %>").click(function()
{
  $(this)
    .hide()
    .after('<input type="button" value="Please Wait..." disabled="disabled" />');
});

Pavel Chuchuva 2009-06-27 08:49:46

This solution worked well for us... especially when you need the input value to still be included in the the form. Thanks!

J.13.L 2009-08-31 18:19:20

Answer 8

A:

http://trentkocurek.tumblr.com/post/435827507/aspdotnet-stop-double-clicking

Trent 2010-03-09 04:27:45

Answer 9

A:

We use the following JQuery script, to disable all buttons (input type=submit and button), when one button is clicked.

We just included the script in a global JavaScript file, so we don't have to do remember anything when creating new buttons.

$(document).ready(function() {
    $(":button,:submit").bind("click", function() {
        setTimeout(function() {
            $(":button,:submit").attr("disabled", "true");
        }, 0);
    });
});

This script could easily be extended with a check for Page_ClientValidate().

Thomas Jespersen 2010-03-30 10:44:19

ansaurus

tags:

views:

answers:

Why doesn't my form post when I disable the submit button to prevent double clicking?

related questions