document.forms[0].submit() 有什么问题？

Question

我正在帮助某人处理他们遇到问题的网页，我整理了验证部分，但提交过程的行为与您预期的不同。

为了捕捉和停止默认事件，我在函数头部使用了以下内容

var evt = event ? event:window.event;
if (evt.preventDefault) evt.preventDefault();
evt.returnValue = false;
evt.cancelBubble = true;

如果我更改其中的任何部分，默认操作的预防将不起作用，并且 MSIE 中的页面将提交，即使验证错误存在或持续存在。在 Chrome 下，浏览器不提交但抛出错误，在 MSIE 下使用阻止例程，调试会在同一行显示错误。

Chrome: Uncaught TypeError: object is not a function

MSIE : 对象不支持该属性或方法

有问题的行：

document.forms[0].submit();

尝试

document.forms.form1.submit();
// or
document.forms['form1'].submit();

不过没用

document.forms.form1.reset();

或任何寻址变体，包括 .getEmelentsById("...");方法效果很好，我只是对这个问题感到困惑，我的 JS 解释器被塞满的想法确实在我脑海中闪过......

请任何人有任何不使用 JQuery 的想法。

Answer 1

由于form.reset() 确实有效，但form.submit() 无效，因此某些东西正在覆盖表单上的submit 方法。我敢打赌，你有一个 id 或名称为“submit”的表单元素：

<input id="submit" />

或者：

<input name="submit" />

这样form.submit 将解析为输入元素，而不是表单的submit() 方法。

Quick jsFiddle demo

简单的解决方法是更改​​元素的 id。更难、更不明智的解决方法是获取对原型 submit 方法的引用并在表单的上下文中调用它：

var f = document.forms.form1;
Object.getPrototypeOf(f).submit.call(f);

或

document.createElement("form").submit.call(document.forms.form1);