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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11240176/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 05:05:39  来源:igfitidea点击:

Difference between onclick="document.forms[0].submit();" and form submit

javascripthtml

提问by loddn

Inside a form I have a button. What is the difference between when I submit the form via JavaScript like this

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

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

and when I submit it like this

当我像这样提交时

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

The first one works for me with most browsers except webkit-based. The latter works fine as well. No difference in functionality is apparent to me. Is there one?

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

回答by nnnnnn

The first example:

第一个例子:

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

...will do two things:

...会做两件事:

  1. Its onclickwill submit the firstform in the document (i.e., the one specified by the 0 index in forms[0]).
  2. It will submit the form it is in (if it is in a form) because a button with no typeattribute specified will be a submit button by default.
  1. onclick会提交文档中的第一个表单(即 0 索引指定的表单forms[0])。
  2. 它将提交它所在的表单(如果它在表单中),因为type默认情况下没有指定属性的按钮将是提交按钮。

This two-step double-submit behaviour can be seen in this quick-and-dirty demo: http://jsfiddle.net/fMwuX/(and is likely to lead to weird behaviour that might be a bit confusing to debug). If the button isn't actually in a form then this won't be a problem.

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

The second example:

第二个例子:

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

Will simply submit the form it is in (if it is in one).

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

In my opinion the second option is definitely preferable for several reasons, including but not limited to:

在我看来,出于多种原因,第二种选择绝对是可取的,包括但不限于:

  1. It will work even if the user has JS disabled.
  2. It doesn't hard-code a form index with forms[0].
  3. It is shorter and clearer.
  4. It won't clash with other form submit validation.
  1. 即使用户禁用了 JS,它也能工作。
  2. 它不会对表单索引进行硬编码forms[0]
  3. 它更短更清晰。
  4. 它不会与其他表单提交验证发生冲突。

回答by slash197

The javascript example will submit the first form in your HTML document while the second example will submit the form which wraps that button.

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

回答by jbrtrnd

documents.forms[0].submitwill trigger the submission of the first form in your HTML page. Indeed, documents.formscontains all the forms of your document. You can access them with their name attribute or their index.

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

Then, the input of type submitin a form will trigger the submission of his parent form.

然后,submit在表单中输入 type将触发其父表单的提交。

回答by Bobby Hyman

As you've discovered, the first one makes the page not work in some circumstances, and is - for this, and other reasons - generally considered bad practice. Use the second.

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