IE9 Double Form提交问题
[英]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. 这只发生在IE9中，但我只针对Safari，Chrome（最新），FF（Ver 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!) 我已经打电话给微软支持，他们声称这是一个“Javascript兼容性问题”，所以我们需要微调我们的Javascript以使我们的网站在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: 目前，如果我不将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! 谢谢！
7 个解决方案
解决方案1
20 已采纳 2011-12-08 20:36:31
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. onclick Javascript不保证正常提交也不会执行。 For that it needs to return false, like this: 为此，它需要返回false，如下所示：
onclick="this.disabled=true;document.forms[0].submit(); return false;"
Is this change in behavior an IE9 bug? 这种行为的改变是IE9的错误吗？ 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. 如果DOM / Javacript标准保证document.submit（）是文档中所有执行的结束，那么这只是一个错误。 I doubt that this is the case. 我怀疑是这种情况。
解决方案2
5 2012-07-27 17:35:21
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. 抽象出复杂性，问题似乎是IE9在javascript中触发提交事件时， 只需单击一次按钮即可提交两次表单 。
In general, I found doing this fixes the IE9 double form submission problem: 一般来说，我发现这样做修复了IE9双表单提交问题：
(failing IE9 double submission HTML): （IE9双提交HTML失败）：
<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. 所以基本上，我正在使用事件监听器（单击）处理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. 但我没有测试它。
解决方案3
1 2012-12-15 10:43:40
When you use 当你使用
onclick="document.forms[0].submit();"
on the submit button, write input type="button" instead of type="submit" , 在提交按钮上，写入input type="button"而不是type="submit" ，
解决方案4
1 2011-09-28 02:01:32
因为你已经有了执行.submit（）的代码，为什么不将按钮类型更改为简单按钮而不是提交？
解决方案5
1 2011-09-28 02:02:18
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." 我不确定这是否是问题，但是，翻译成简单的英语，您的代码似乎在说“单击提交按钮，将disabled属性设置为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 true instead 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()部分，因为它是多余的。
解决方案6
1 2011-09-28 02:03:12
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属性停止事件传播？
解决方案7
0 2014-03-21 11:40:58
我们在IE9中遇到了同样的问题，我们通过将event的cancelBubble和returnValue标志分别设置为true和false来解决了这个问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.