CODEWITHSUNDEEP
javascripthtml
loddn
loddn

Reputation: 658

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

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?

Upvotes: 3

Views: 50613

Answers (4)

nnnnnn
nnnnnn

Reputation: 150020

The first example:

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

...will do two things:

  1. Its onclick will submit the first form 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 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.

Upvotes: 8

jbrtrnd
jbrtrnd

Reputation: 3833

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.

Upvotes: 1

Bobby Jack
Bobby Jack

Reputation: 16018

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.

Upvotes: -1

slash197
slash197

Reputation: 9034

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

Upvotes: 3

Related Questions