Javascript IE9 双表单提交问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7577542/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE9 Double Form Submit Issue
提问by forestclown
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.
我只是想知道是否有人对我所处的情况有一些信息或反馈。目前我面临“双重表单提交”问题，我单击“提交”按钮一次，然后提交两次表单。这只发生在 IE9 中，但我只针对 Safari、Chrome（最新）、FF（版本 5/6）、IE8 和 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.
代码已经在我的网站上很久了，这是我今年IE9才发布以来第一次遇到双重提交问题，可能这几天使用IE9的人越来越多，因此我收到了用户对这个问题的投诉.
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.
这会强制 IE9 使用 IE8 兼容性，它将正确执行 Javascript 以进行提交。
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!)
我已致电 Microsoft 支持，他们声称这是“Javascript 兼容性问题”，因此我们需要微调 Javascript 以使我们的网站在 IE9 下正常工作..（废话！）
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:
我希望如果有人也面临类似的问题有更多的信息或反馈。目前，如果我不将 X-UA-Compatible 更改为 IE=8，我可以将我的代码更改为：
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?
这也将解决双重提交问题，但是否还有我们应该注意的 IE9 兼容性问题列表？
Thanks!
谢谢！
回答by Kdeveloper
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 Javascript 不保证正常提交也不会执行。为此，它需要返回 false，如下所示：
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.
这种行为变化是 IE9 错误吗？这取决于，这可能取决于时间问题导致的法律行为。如果 DOM/Javacript 标准保证 document.submit() 是文档中所有执行的结束，这只是一个错误。我怀疑情况是否如此。
回答by ORIGINALUSRNM
Abstracting out the complexity, the issue seems to be that IE9 submits forms twice with one button clickwhen the submit event is fired in javascript.
抽象出复杂性，问题似乎是当在javascript中触发提交事件时，IE9只需单击一次按钮即可提交两次表单。
In general, I found doing this fixes the IE9 double form submission problem:
总的来说，我发现这样做可以解决 IE9 双表单提交问题：
(failing IE9 double submission HTML):
（IE9 双重提交 HTML 失败）：
<input type="submit" />
<input type="submit" />
(IE9 html double submission fix):
（IE9 html 双重提交修复）：
<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.
所以基本上，我正在使用事件侦听器（ click ）在 javascript（未显示）中处理表单提交，但是在旧式事件处理程序（ onclick ）上返回 false IE9 似乎自动调用，即使您已经通过事件监听器。
I'm guessing you could do the same in pure javascript:
我猜你可以在纯 javascript 中做同样的事情：
inputElement.onclick = function(){ return false; };
but I did not test it.
但我没有测试它。
回答by vatan
When you use
当你使用
onclick="document.forms[0].submit();"
onclick="document.forms[0].submit();"
on the submit button, write input type="button"instead of type="submit",
在提交按钮上，写input type="button"而不是type="submit"，
回答by Kelmen
since you already have the code to perform .submit(), why not change the button type to simple button instead of submit?
既然您已经有了执行 .submit() 的代码，为什么不将按钮类型更改为简单按钮而不是提交？
回答by Philip Schweiger
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."
我不确定这是问题所在，但是，翻译成简单的英语，您的代码似乎在说“单击提交按钮时，将禁用的属性设置为 true，然后提交表单。”
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.
但是，由于单击提交按钮已经提交了表单，因此您的浏览器可能会收到两个提交请求 - 一次是在您单击按钮时，第二次是在您的 javascript 告诉它提交时。
If you are not doing ajax, just a regular submit, you should be able to return trueinstead of calling submit- essentially, tell the browser to go ahead and do the default action (which is submit).
如果你不做 ajax，只是一个普通的提交，你应该能够return true而不是调用submit- 本质上，告诉浏览器继续执行默认操作（即提交）。
Or really, kill the whole submit()portion entirely, since it's redundant.
或者真的，submit()完全杀死整个部分，因为它是多余的。
回答by Adam Eberlin
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?
部分问题是我相信您提交了两次。在开始第二个事件之前，您需要停止第一个事件。有关使用内联 javascript 停止事件的更多信息，请参阅此帖子：如何使用内联 onclick 属性停止事件传播？
回答by Thambu Samuel Asirvatham
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.
我们在 IE9 中遇到了同样的问题，我们通过将事件的 cancelBubble 和 returnValue 标志分别设置为 true 和 false 来解决这个问题。
