javascript - onclick ="document.forms[0].submit();"和表单提交的区别

Question

在表单中我有一个按钮。当我像这样通过 JavaScript 提交表单时有什么区别

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

当我这样提交的时候

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

第一个适用于大多数浏览器，但基于 webkit 的浏览器除外。后者也可以正常工作。对我来说，功能上没有明显的区别。有吗？

Answer 1

第一个例子:

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

...会做两件事:

1. 它的 onclick 将提交文档中的第一个 表单(即 forms[0] 中索引 0 指定的表单) .
2. 它将提交它所在的表单(如果它在表单中)，因为没有指定 type 属性的按钮默认为提交按钮。

可以在这个快速演示中看到这种两步双重提交行为:http://jsfiddle.net/fMwuX/ (并且可能会导致奇怪的行为，这可能会使调试有点困惑)。如果按钮实际上不在表单中，那么这就不是问题。

第二个例子:

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

将简单地提交它所在的表单(如果它在一个表单中)。

在我看来，第二种选择绝对更可取，原因有几个，包括但不限于:

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