IE9 Double Form提交问题

时间:2011-09-28 01:57:27

标签: javascript forms internet-explorer-9 double-submit-problem

我只是想知道是否有人对我所处的情况有一些信息或反馈。 目前我正面临“双表格提交”问题,我点击“提交”按钮一次,然后提交表格两次。这只发生在IE9中,但我只针对Safari,Chrome(最新),FF(Ver 5/6),IE8和IE9进行了测试。

以下是代码:

<!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>

有问题的部分是:

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

代码已经在我的网站上存在了很长时间,这是我第一次遇到双提交问题,因为IE9今年才发布,而且可能这些日子越来越多人使用IE9,因此我收到了用户投诉关于这个问题。

最难的部分是双重提交问题并不总是可重现的。有时它会提交一次,有时它会提交一次。

我目前的工作是改变:

<meta http-equiv="X-UA-Compatible" content="IE=edge" >

并改为:

<meta http-equiv="X-UA-Compatible" content="IE=8" >

这迫使IE9使用IE8兼容性,它将正确执行Javascript以供提交。

我已经打电话给微软支持,他们声称这是一个“Javascript兼容性问题”,因此我们需要微调我们的Javascript以使我们的网站在IE9下正常工作..(Duh!)

无论如何,是我的代码:

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

开头已经错了?因为即使其他浏览器没有抱怨,但可能这是不正确的开始?

我希望如果有人也面临类似问题,可以获得更多信息或反馈。 目前,如果我不将X-UA-Compatible更改为IE = 8,我可以将我的代码更改为:

onclick="this.disabled=true;"

这也将解决双重提交问题,但是还有一个我们应该注意的IE9兼容性问题列表吗?

谢谢!

7 个答案:

答案 0 :(得分:20)

此代码错误:

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

onclick Javascript不保证正常提交也不会执行。为此,它需要返回false,如下所示:

onclick="this.disabled=true;document.forms[0].submit(); return false;"

这种行为改变是IE9的错误吗?这取决于,这可能取决于时间问题导致的法律行为。如果DOM / Javacript标准保证document.submit()是文档中所有执行的结束,那么这只是一个错误。我怀疑是这种情况。

答案 1 :(得分:5)

提出复杂性,问题似乎是 IE9提交表单两次 在javascript中触发提交事件时,单击一个按钮

一般来说,我发现这样做可以修复IE9的双重问题 表单提交问题:

(IE9双重提交HTML失败):

<input type="submit" />

(IE9 html双提交修复):

<input type="submit" onclick="return false; " />

所以基本上,我正在使用事件监听器(点击)处理javascript(未显示)中的表单提交,但是在旧的学校事件处理程序(onclick)上返回false,IE9似乎自动调用,即使你已经处理过它通过一个事件监听器。

我猜你可以用纯粹的javascript做同样的事情:

inputElement.onclick = function(){ return false; };

但我没有测试它。

答案 2 :(得分:1)

既然您已经有了执行.submit()的代码,为什么不将按钮类型更改为简单按钮而不是提交?

答案 3 :(得分:1)

我不确定这是否是问题,但是,翻译成普通英语,您的代码似乎在说“单击提交按钮,将disabled属性设置为true,然后提交表单。”

但是,由于点击提交按钮已经提交了表单,因此您的浏览器可能会收到两个提交请求 - 一次是您单击按钮,第二次是您的javascript要求提交。

如果你没有做ajax,只是常规提交,你应该能够return true而不是调用submit - 实际上,告诉浏览器继续执行默认操作(这是提交)。

或者真的,完全杀死整个submit()部分,因为它是多余的。

答案 4 :(得分:1)

问题的一部分是我相信你提交了两次。您需要在开始第二个事件之前停止第一个事件。有关使用内联javascript停止事件的详细信息,请参阅此帖子:How to stop event propagation with inline onclick attribute?

答案 5 :(得分:1)

使用时

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

在提交按钮上,写下input type="button"而不是type="submit"

答案 6 :(得分:0)

我们在IE9中遇到了同样的问题,我们通过将event的cancelBubble和returnValue标志分别设置为true和false来解决了这个问题。