onclick="document.forms[0].submit();"和form submit之间的区别

Question

在表单中有一个按钮。如果我通过JavaScript提交表单，那么和直接点击按钮提交的区别是什么？

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

当我像这样提交它时

<button type="submit"></button>?

第一个对于大多数浏览器都适用，但是不支持基于webkit内核的浏览器。后一个同样可以正常使用。我没有发现它们之间有功能上的区别。你知道有什么区别吗？

- loddn

---

第一个在Chrome和Safari中运行得很好。http://jsfiddle.net/ZUuSw/ - Esailija

不是我的情况。那么发布的两种方式有什么区别呢？一种有效，另一种无效。 - loddn

我猜你应该启用 JavaScript。 - Esailija

在这种情况下，它正在按照我说的方式工作 - 表单确实应该通过单击执行提交JavaScript的按钮来提交文档中的第一个表单... - Esailija

我从未说过它没有。但我想我的情况相当独特。通过Javascript发布帖子时，提交的帖子会设置Content-Type:text/html;charset=UTF-8，而不使用Javascript发布时，Type:text/html;charset=ISO-8859-1。 - loddn

这取决于目标表单的accept-charset属性以及站点的编码，无论您是手动提交该表单还是通过JavaScript提交，都不应该有影响。 - Esailija

Answer 1

第一个例子：

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

...将执行两个操作：

1. 它的 onclick 将提交文档中的第一个表单（即由 forms[0] 指定的表单）。
2. 如果它在一个表单中，则会提交该表单，因为没有指定 type 属性的按钮默认为提交按钮。

这种两步双重提交行为可以在这个快速而简单的演示中看到：http://jsfiddle.net/fMwuX/（可能会导致奇怪的行为，可能会有点困惑调试）。如果按钮实际上不在表单中，则不会出现问题。

第二个例子：

<button type="submit"></button>

如果表单存在，则简单地提交它（如果它在表单中）。

在我看来，第二个选项绝对更可取，原因有很多，包括但不限于以下几点：

1. 即使用户禁用了JS，它也可以工作。
2. 它不会硬编码表单索引为 forms[0] 。
3. 它更短更清晰。
4. 它不会与其他表单提交验证冲突。

- nnnnnn

---

谢谢，这并不是我在寻找的内容，但我在问题描述上没有表达得够清楚。我想我的情况比较特殊。当通过基于Webkit的浏览器使用Javascript进行发布时，提交的内容类型为text/html;charset=UTF-8，而在没有使用Javascript进行发布时，类型为text/html;charset=ISO-8859-1。 - loddn

抱歉，我不知道为什么字符集会不同。 - nnnnnn

Answer 2

JavaScript示例将提交HTML文档中的第一个表单，而第二个示例将提交包含该按钮的表单。

- slash197

Answer 3

documents.forms[0].submit 会触发 HTML 页面中第一个表单的提交。实际上，documents.forms 包含了该文档中的所有表单，您可以通过其名称属性或索引访问它们。

然后，表单中类型为 submit 的输入元素将会触发其所在表单的提交。

- jbrtrnd

Answer 4

正如你所发现的那样，第一种方法在某些情况下会导致页面无法正常工作，因此通常被认为是不良实践。建议使用第二种方法。

- Bobby Jack