Difference between onclick="document.forms[0].submit();" and form submit
html, javascript
Solution
The first example:
<button onclick="document.forms[0].submit();">
...will do two things:
- Its `onclick` will submit the first form in the document (i.e., the one specified by the 0 index in `forms[0]`).
- 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:
- It will work even if the user has JS disabled.
- It doesn't hard-code a form index with `forms[0]`.
- It is shorter and clearer.
- It won't clash with other form submit validation.
Problem
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?