IE9 Double Form Submit Issue

Asked 28/9, 2011 at 1:57 Answered 21/3, 2014 at 11:40

Solved javascript forms internet-explorer-9 double-submit-problem

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!

Postulant answered 28/9, 2011 at 1:57 Comment(0)

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.

Helsell answered 8/12, 2011 at 20:36 Comment(2)

Thanks for the answer, just saved me. Could you explain a little more why IE has this behaviour?. Thanks again. – Bandaranaike 29/5, 2014 at 13:58

In my opinion this is a bug, because it also occurs when you omit 'type="submit"'. Gladly your solution also works then. – Ludovika 24/6, 2016 at 8:54

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.

Gannet answered 27/7, 2012 at 17:35 Comment(0)

since you already have the code to perform .submit(), why not change the button type to simple button instead of submit?

Defelice answered 28/9, 2011 at 2:1 Comment(2)

Ya, I understand the changes will solve the problem. But my question is that it used to work on all browsers (at least the browsers we are using most of the time, IE8, FF, Chrome, Safari), but on IE9 the behavior is different... – Postulant 28/9, 2011 at 2:8

this is like asking "why IE9 don't behave in the way that I/we expected". Its really no point for this. What you find worked today, it can be break after next month patches by any browser. – Defelice 28/9, 2011 at 3:26

I don't know for sure that this is the problem, but, translated to plain english, your code appears to be saying "On clicking the submit button, turn the disabled attribute to true, and then submit the form."

But, since clicking the submit button already submits the form, maybe your browser is receiving two requests to submit - once when you click the button, and the second time when your javascript tells it to submit.

If you are not doing ajax, just a regular submit, you should be able to return true instead of calling submit - essentially, tell the browser to go ahead and do the default action (which is submit).

Or really, kill the whole submit() portion entirely, since it's redundant.

Chervil answered 28/9, 2011 at 2:2 Comment(2)

Ya I know this is not logical, but what I am trying to say is that all other browsers submit only once, and on IE9 it sometimes submit twice... – Postulant 28/9, 2011 at 2:6

well, each browser has its own implementation of JS, so on edge cases like this you'll find differences. Best solution is to always make the code logic as tight as you can, and only then code for the exceptions. – Chervil 28/9, 2011 at 2:9

Part of the problem is that I believe you're submitting twice. You need to stop the first event before you start the second. See this post for more information on stopping events using inline javascript: How to stop event propagation with inline onclick attribute?

Promissory answered 28/9, 2011 at 2:3 Comment(1)

I understand the code is probably not right to begin with. By changing the code we can make it work properly in IE9 by just removing the submit() call, and also the suggestions from other answers will solve it too. What I am probably trying to ask is that, is it because IE9 using a totally new Javascript engine and some of the original behaviors will be different? (Which is probably a stupid question), but is there a list somewhere in the net that specify some of the javascript compatibility issues? – Postulant 28/9, 2011 at 2:12

When you use

onclick="document.forms[0].submit();"

on the submit button, write input type="button" instead of type="submit",

Crowned answered 15/12, 2012 at 10:43 Comment(1)

This actually did work for me. Found it out on my own based on the accepted answer, but this does work too in IE. I believe the issue is still even up to the latest version of IE which is EDGE as of this comment. Also, avoid using <button> with an onclick in IE you may run into the same issue. – Tuneful 22/7, 2016 at 15:58

we had the same problem in IE9 and we solved the issue by setting cancelBubble and returnValue flags of event to true and false respectively.

Julissa answered 21/3, 2014 at 11:40 Comment(1)

please explain more details. – Lobe 21/3, 2014 at 11:58

Recommended topics

Hot tags