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?

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?

• javascript
• html

• The first one works just fine jsfiddle/ZUuSw in chrome and safari – Esailija Commented Jun 28, 2012 at 7:52
• Not in my case. So whats the difference between the to ways of posting. One work the other don't. – loddn Commented Jun 28, 2012 at 8:39
• I guess you should enable javascript then – Esailija Commented Jun 28, 2012 at 8:47
• In that case it's working like I said - the form should indeed submit through javascript by clicking that button which executes javascript to submit the first form in the document... – Esailija Commented Jun 28, 2012 at 9:03
• I have never said it didn't. But I guess my situation is rather unique. When posting via Javascript the post is submitted and the Content-Type:text/html;charset= is set to UTF-8, when posting without javascript the Type:text/html;charset= is set to ISO-8859-1 – loddn Commented Jun 28, 2012 at 9:06

4 Answers 4

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/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.

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

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.

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.