How is the default submit button on an HTML form determined?

How is the default submit button on an HTML form determined?

If a form is submitted but not by any specific button, such as

by pressing Enter
using HTMLFormElement.submit() in JS

how is a browser supposed to determine which of multiple submit buttons, if any, to use as the one pressed?
This is significant on two levels:

calling an onclick event handler attached to a submit button
the data sent back to the web server

My experiments so far have shown that:

when pressing Enter, Firefox, Opera and Safari use the first submit button in the form
when pressing Enter, IE uses either the first submit button or none at all depending on conditions I haven’t been able to figure out
all these browsers use none at all for a JS submit

What does the standard say?
If it would help, here’s my test code (the PHP is relevant only to my method of testing, not to my question itself)




Test

Get

$v) echo “

$k
$v

“; ?>

Post

$v) echo “

$k
$v

“; ?>






Solutions/Answers:

Solution 1:

If you submit the form via Javascript (i.e. formElement.submit() or anything equivalent), then none of the submit buttons are considered successful and none of their values are included in the submitted data. (Note that if you submit the form by using submitElement.click() then the submit that you had a reference to is considered active; this doesn’t really fall under the remit of your question since here the submit button is unambiguous but I thought I’d include it for people who read the first part and wonder how to make a submit button successful via JS form submission. Of course, the form’s onsubmit handlers will still fire this way whereas they wouldn’t via form.submit() so that’s another kettle of fish…)

If the form is submitted by hitting Enter while in a non-textarea field, then it’s actually down to the user agent to decide what it wants here. The specs don’t say anything about submitting a form using the enter key while in a text entry field (if you tab to a button and activate it using space or whatever, then there’s no problem as that specific submit button is unambiguously used). All it says is that a form must be submitted when a submit button is activated, it’s not even a requirement that hitting enter in e.g. a text input will submit the form.

I believe that Internet Explorer chooses the submit button that appears first in the source; I have a feeling that Firefox and Opera choose the button with the lowest tabindex, falling back to the first defined if nothing else is defined. There’s also some complications regarding whether the submits have a non-default value attribute IIRC.

The point to take away is that there is no defined standard for what happens here and it’s entirely at the whim of the browser – so as far as possible in whatever you’re doing, try to avoid relying on any particular behaviour. If you really must know, you can probably find out the behaviour of the various browser versions but when I investigated this a while back there were some quite convoluted conditions (which of course are subject to change with new browser versions) and I’d advise you to avoid it if possible!

Solution 2:

Andrezj’s pretty much got it nailed… but here’s an easy cross-browser solution.

Take a form like this:

<form>
    <input/>
    <button type="submit" value="some non-default action"/>
    <button type="submit" value="another non-default action"/>
    <button type="submit" value="yet another non-default action"/>

    <button type="submit" value="default action"/>
</form>

and refactor to this:

<form>
    <input/>

    <button style="overflow: visible !important; height: 0 !important; width: 0 !important; margin: 0 !important; border: 0 !important; padding: 0 !important; display: block !important;" type="submit" value="default action"/>

    <button type="submit" value="some non-default action"/>
    <button type="submit" value="another non-default action"/>
    <button type="submit" value="yet another non-default action"/>
    <button type="submit" value="still another non-default action"/>

    <button type="submit" value="default action"/>
</form>

Since the W3C spec indicates multiple submit buttons are valid, but omits guidance as to how the user-agent should handle them, the browser manufacturers are left to implement as they see fit. I’ve found they’ll either submit the first submit button in the form, or submit the next submit button after the form field that currently has focus.

Unfortunately, simply adding a style of display: none; won’t work because the W3C spec indicates any hidden element should be excluded from user interactions. So hide it in plain sight instead!

Above is an example of the solution I ended up putting into production. Hitting the enter key triggers the default form submission is behavior as expected, even when other non-default values are present and precede the default submit button in the DOM. Bonus for mouse/keyboard interaction with explicit user inputs while avoiding javascript handlers.

Note: tabbing through the form will not display focus for any visual element yet will still cause the invisible button to be selected. To avoid this issue, simply set tabindex attributes accordingly and omit a tabindex attribute on the invisible submit button. While it may seem out of place to promote these styles to !important, they should prevent any framework or existing button styles from interfering with this fix. Also, those inline styles are definitely poor form, but we’re proving concepts here… not writing production code.

Solution 3:

HTML 4 does not make it explicit. The current HTML5 working draft specifies that the first submit button must be the default:

A form element’s default button is the
first submit button in
tree order whose form owner is that
form element.

If the user agent supports letting the user submit a form
implicitly (for example, on some platforms hitting the “enter” key
while a text field is focused implicitly submits the form), then
doing so for a form whose default button has a defined
activation behavior must cause the user agent to
run synthetic click activation steps on that
default button.

Solution 4:

I think this post would help if someone wants to do it with jQuery:

http://greatwebguy.com/programming/dom/default-html-button-submit-on-enter-with-jquery/

The basic solution is:

$(function() {
    $("form input").keypress(function (e) {
    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
        $('input[type=submit].default').click();
        return false;
    } else {
        return true;
    }
    });
});

and another I liked was:

jQuery(document).ready(function() {
$("form input, form select").live('keypress', function (e) {
if ($(this).parents('form').find('button[type=submit].default, input[type=submit].default').length <= 0)
return true;

if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$(this).parents('form').find('button[type=submit].default, input[type=submit].default').click();
return false;
} else {
return true;
}
});
}); 

Solution 5:

I had a form with 11 submit buttons on it, and it would always use the first submit button when the user pressed enter. I read elsewhere that it is not a good idea (bad practice) to have more than one submit button on a form, and the best way to do this is have the button you want as default, as the only submit button on the form. The other buttons should be made into “TYPE=BUTTON” and an onClick event added that calls your own submit routine in Javascript. Something like this :-

<SCRIPT Language="JavaScript">
function validform()
{
  // do whatever you need to validate the form, and return true or false accordingly
}

function mjsubmit()
{
  if (validform()) { document.form1.submit(); return true;}
  return false;
}
</SCRIPT>
<INPUT TYPE=BUTTON NAME="button1" VALUE="button1" onClick="document.form1.submitvalue='button1'; return mjsubmit();">
<INPUT TYPE=BUTTON NAME="button2" VALUE="button2" onClick="document.form1.submitvalue='button2'; return mjsubmit();">
<INPUT TYPE=SUBMIT NAME="button3" VALUE="button3" onClick="document.form1.submitvalue='button3'; return validform();">
<INPUT TYPE=BUTTON NAME="button4" VALUE="button4" onClick="document.form1.submitvalue='button4'; return mjsubmit();">

Here, button3 is the default, and although you are programmatically submitting the form with the other buttons, the mjsubmit routine validates them. HTH.

Solution 6:

This can now be solved using flexbox:

HTML

<form>
    <h1>My Form</h1>
    <label for="text">Input:</label>
    <input type="text" name="text" id="text"/>

    <!-- Put the elements in reverse order -->
    <div class="form-actions">
        <button>Ok</button> <!-- our default action is first -->
        <button>Cancel</button>
    </div>
</form>

CSS

.form-actions {
    display: flex;
    flex-direction: row-reverse; /* reverse the elements inside */
}

Explaination
Using flex box, we can reverse the order of the elements in a container that uses display: flex by also using the CSS rule: flex-direction: row-reverse. This requires no CSS or hidden elements. For older browsers that do not support flexbox, they still get a workable solution but the elements will not be reversed.

Demo
http://codepen.io/Godwin/pen/rLVKjm

Related:  Javascript: Module Pattern vs Constructor/Prototype pattern?