submit button disabled cancels form submit

Question

I have a form like this:

<form action="lol.php" method="POST">
<input type="text" name="fe" />
<input type="submit" id="submitbtn" value="submit" onclick="this.disabled = true;" />
</form>

and in firefox it works perfectly, but in Internet Explorer (latest version) the button goes disabled but the form does not submit. I have also tried:

<form action="lol.php" method="POST" onsubmit="document.getElementById('submitbtn').disabled = true">

and removed the onclick code from the submit button, but that had the same effect. What code should I use to work on all browsers?

Answer 1

I ran into this problem before as well. I ended up hiding the submit button when the form was submitted, and replacing it with a disabled button with the same text. Worked great.

Answer 2

If you want you can use jquery.

Try this:

$('#submtbtn').submit(function() {
   $(this).attr('disabled', 'disabled');
});

I think it works on all browser.

Answer 3

try this:

onclick="this.disabled=true;return true;"

Otherwise, MS exploder is not allowing the button to continue processing once disabled. (It's a bitch, cause I use this and it works in FireFox)

Answer 4

That's weird.

Try:

<input type="submit" id="submitbtn" value="submit" onclick="setTimeout(function () { this.disabled = true;}, 0)" />

Answer 5

another potential hack:

<form action="lol.php" method="POST" name="lolform">
<input type="text" name="fe" />
<input type="submit" id="submitbtn" value="submit" onclick="document.lolform.submit();this.disabled = true;" />
</form>

Answer 6

Ok, so the good hack is to prepare second fake button that does nothing:

<form action="lol.php" method="POST">
<input type="text" name="fe" />
<input type="button" id="submitbtnDisabled" disabled="disabled" value="submit" style="display:none;" />
<input type="submit" id="submitbtn" value="submit" onclick="this.style.display='none'; document.getElementById('submitbtnDisabled').style.display='inline';" />
</form>

Note:

Because you said you're not using jQuery I'm using standard JavaScript. The only suggestion is to use unbotrusive JavaScript and move inline CSS to a stylesheet just to separate scripts and styles from HTML.