September 13th, 2008

When you’re filling in an HTML form and you hit Return / Enter, your browser will submit the form as if you clicked the default button… which is always the first submit button in the form. Sometimes though, you don’t want the default button to be the first one.

I’ve seen some funky solutions to this problem, including using a hidden submit button which appears first in the form, but I’ve found the following works fine – change all the submit buttons that you don’t want to be default to normal buttons, i.e., type="button" instead of type="submit", and use their onclick events to submit the form. For example:

<form id="myform" method="get">
<!-- Not the default button -->
<input name="b1" type="button" onclick="this.form.submit()" value="B1" />
<!-- The default button -->
<input name="b2" type="submit" value="B2" />
</form>

2 Responses to “Default button on an HTML form”

  1. Interesting solution. I always went for the hidden first submit button, followed by whatever else you want, followed by the real submit button. This solution would presumably require javascript to be enabled?

    So anyway… I hear you’re leaving soon. Since I’ve not seen you since you last left, fancy a coffee before then?

  2. This solution would… in this world of Web 2.0 not a lot works without Javascript.

    How about sometime next Thu or Fri? Those are my days in Belfast for farewells and coffees. Text me if you’re free.

Leave a Reply