Menu
I am just wondering if anyone have some info or feedback about the situation I am in. Currently I am facing a "Double Form Submit" issue, where I click the "Submit" button once, and it submit the form twice. This only happens in IE9, but I have only tested against Safari, Chrome (Latest), FF (Ver 5/6), IE8, and IE9.
Here is the code:
<!DOCTYPE html>
<html lang="en-us" dir="ltr">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<title>IE9 test</title>
</head>
<body>
<h1>Testing</h1>
<form method="POST" id="submit_form">
<input type="text" name="x" value="xxxx" />
<input type="text" name="y" value="yyyy" />
<button type="submit" class="btn_sign_in" id="btn_logon" onclick="this.disabled=true;document.forms[0].submit();">Submit</button>
</form>
</body>
</html>
The problematic part is:
onclick="this.disabled=true;document.forms[0].submit();"
The code has been in my site for ages, and this is the first time I have encountered double submit problem since IE9 only releases this year, and probably these days more and more people using IE9, and hence I have received users complaints about this problem.
The hardest part is that the double submit problem is not always reproducible. Sometimes it will double submit, sometimes it will submit once.
My current work around is change from:
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
and change to:
<meta http-equiv="X-UA-Compatible" content="IE=8" >
This forces IE9 to use IE8 compatibility and it will execute the Javascript properly for for submission.
I have called Microsoft support, and they claim this is a "Javascript compatibility issue", so we will need to fine tune our Javascript to have our site work properly under IE9..(Duh!)
Anyway, is my code:
onclick="this.disabled=true;document.forms[0].submit();"
is already wrong to begin with? Because even though other browsers are not complaining, but probably this is not right to be begin with?
I am hoping if someone also faces similar issues have some more info or feedback. Currently if I don't change X-UA-Compatible to IE=8, I can change my code to:
onclick="this.disabled=true;"
This will also solve the double submit issue, but is there also a list of IE9 compatibility issues that we should take note on?
Thanks!
382
A simple fix is to simply remove any "submit" handlers on the form before adding the new one.
The NUMBER ONE error is having ANYTHING with the reserved word submit as ID or NAME in your form. If you plan to call . submit() on the form AND the form has submit as id or name on any form element, then you need to rename that form element, since the form's submit method/handler is shadowed by the name/id attribute.
Use the preventDefault() method on the event object to prevent a page refresh on form submit in React, e.g. event. preventDefault() . The preventDefault method prevents the browser from issuing the default action which in the case of a form submission is to refresh the page.
Yes, structurally the submit button needs to be inside a form element for the document to be valid X/HTML.
This code is wrong:
onclick="this.disabled=true;document.forms[0].submit();"
The onclick Javascript does not guarantee that the normal submit will not execute as well. For that it needs to return false, like this:
onclick="this.disabled=true;document.forms[0].submit(); return false;"
Is this change in behavior an IE9 bug? It depends, this could depend on legal behavior that is the result of timing issues. It's only a bug if the DOM/Javacript standard guarantees that the document.submit() is the end of all execution in a document. I doubt that this is the case.
168
Abstracting out the complexity, the issue seems to be that IE9 submits forms twice with one button click when the submit event is fired in javascript.
In general, I found doing this fixes the IE9 double form submission problem:
(failing IE9 double submission HTML):
<input type="submit" />
(IE9 html double submission fix):
<input type="submit" onclick="return false; " />
So basically, I am handling the form submission in javascript ( not shown) with an event listener ( click ) , but returning false on the old school event handler ( onclick) which IE9 seems to call automatically even if you have already handled it through an event listener.
I'm guessing you could do the same in pure javascript:
inputElement.onclick = function(){ return false; };
but I did not test it.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
