IE9 Double Form Submit Issue
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!
Answer
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.