onclick =“ document.forms [0] .submit（）;”和表单提交之间的区别

Question

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

<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?

Answer 1

The first example:

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

...will do two things:

1. Its onclick will submit the first form in the document (ie, 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 type attribute specified will be a submit button by default.

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.

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.

Answer 2

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

Answer 3

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

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

Answer 4

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.