logo标签列表

IE9双重提交表单问题

javascriptformsinternet-explorer-9double-submit-problem
14

我想知道是否有人对我现在遇到的情况有一些信息或反馈。 目前，我面临一个“双重表单提交”问题，在我点击“提交”按钮一次时，它会提交两次表单。这只在 IE9 中发生，但我已经测试了 Safari、Chrome（最新版本）、Firefox（版本 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下正常工作。 (废话！)

无论如何，我的代码是：

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

这个问题本身是否就是有问题的？因为虽然其他浏览器没有抱怨，但可能这本来就不对吧？

我希望如果其他人也遇到类似的问题，能够给我更多的信息或反馈。 目前，如果我不将X-UA-Compatible更改为IE = 8，我可以更改我的代码为：

onclick="this.disabled=true;"

这也可以解决双重提交的问题，但我们还应该注意哪些IE9兼容性问题呢？

谢谢！

7个回答
21

这段代码是错误的：

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

点击事件的JavaScript不能保证正常提交不会执行。为此，需要像这样返回false:

onclick="return false;"

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

这种行为变化是IE9的bug吗？这要取决于法定行为是否是时间问题的结果。只有当DOM / Javascript标准保证document.submit（）是文档中所有执行的结尾时才是bug。我怀疑情况并非如此。

谢谢你的回答，帮了我大忙。能否再详细解释一下为什么IE会有这种行为？再次感谢。 - Luke SpringWalker
在我看来，这是一个bug，因为当你省略'type="submit"'时它也会发生。幸运的是，你的解决方案在这种情况下也有效。 - David Gausmann
5

将复杂性抽象出来，问题似乎是当JavaScript触发提交事件时，IE9在单击按钮时会两次提交表单。

通常情况下，我发现这样做可以解决IE9双重提交表单的问题：

(失败的IE9双重提交HTML代码)：

<input type="submit" />

(IE9 html双重提交修复方法)：

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

基本上，我在javascript中处理表单提交（未显示）并使用事件监听器（点击），但在旧式的事件处理程序（onclick）上返回false，即使您已经通过事件监听器处理了它，IE9似乎仍会自动调用它。
我猜你可以在纯javascript中做同样的事情：
inputElement.onclick = function(){ return false; };

但我没有测试过它。

1

当您使用

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

在提交按钮上，应该写 input type="button" 而不是 type="submit"。
这对我确实有效。基于被接受的回答，我自己找到了解决办法，但在IE中这也可以起作用。我认为即使是截至本评论时最新版本的IE EDGE，问题仍然存在。此外，在IE中避免使用带有onclick的<button>，否则可能会遇到相同的问题。 - wrldbt
1

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

是的，我理解这些更改将解决问题。但我的问题是，在所有浏览器上它都能正常工作（至少我们大部分时间使用的浏览器，IE8、FF、Chrome、Safari），但在IE9上行为不同... - forestclown
3
这就像在问“为什么IE9的行为不符合我们的预期”，这真的毫无意义。你今天发现可行的方法，下个月可能会被任何浏览器的更新破坏。 - Kelmen
1

我不能确定这是否是问题，但是简单来说，您的代码似乎在说“点击提交按钮后，将禁用属性设置为true，然后提交表单。”

但是，由于点击提交按钮已经提交了表单，也许您的浏览器正在接收两个请求以进行提交 - 一次是当您单击按钮时，另一次是当您的JavaScript告诉它进行提交时。

如果您没有使用ajax，只是普通的提交，您应该能够返回true而不是调用submit - 告诉浏览器继续执行默认操作（即提交）。

或者，干脆完全删除submit()部分，因为它是多余的。

是的，我知道这不合逻辑，但我的意思是所有其他浏览器只提交一次，在IE9上有时会提交两次... - forestclown
1
每个浏览器都有自己的JS实现，因此在这种边缘情况下，您会发现差异。最好的解决方案是始终尽可能紧密地编写代码逻辑，然后再为异常编写代码。 - Philip Schweiger
1
我明白这段代码可能一开始就不正确。通过更改代码，我们可以通过删除submit()调用使其在IE9中正常工作，并且其他答案的建议也可以解决它。我想问的问题可能是，是因为IE9使用全新的Javascript引擎，一些原始行为会有所不同吗？（这可能是一个愚蠢的问题），但是是否有一个在网络上指定一些javascript兼容性问题的列表？ - forestclown
0

我们在IE9中遇到了同样的问题，通过将事件的cancelBubble和returnValue标志设置为true和false，我们解决了这个问题。

请解释更多细节。 - omid
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接