5

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

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

当我这样提交时

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

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

4

4 回答 4

9

第一个例子：

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

...将做两件事：

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

这个两步双提交行为可以在这个快速而肮脏的演示中看到：http: //jsfiddle.net/fMwuX/（并且可能会导致奇怪的行为，这可能会使调试有点混乱）。如果按钮实际上不在表单中，那么这将不是问题。

第二个例子：

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

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

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

  1. 即使用户禁用了 JS，它也会起作用。
  2. 它不会对表单索引进行硬编码forms[0]。
  3. 它更短更清晰。
  4. 它不会与其他表单提交验证冲突。
于 2012-06-28T08:07:44.997 回答
3

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

于 2012-06-28T07:48:08.120 回答
1

documents.forms[0].submit将触发 HTML 页面中第一个表单的提交。确实，documents.forms包含您文档的所有形式。您可以使用它们的名称属性或索引来访问它们。

然后，submit在一个表单中输入 type 会触发他的父表单的提交。

于 2012-06-28T07:54:25.327 回答
-1

正如您所发现的，第一个使页面在某些情况下无法工作，并且 - 由于这个和其他原因 - 通常被认为是不好的做法。使用第二个。

于 2012-06-28T07:53:38.273 回答