HTML form workaround for dealing with mutiple submit buttons and the <enter> key

Posted September 19th, 2009 in HTML and CSS

If there are multiple submit buttons on a form, browsers will usually "click" the first one on the form if the user presses the <enter> key when in a text input field. This can be an issue if the first submit button isn't the one you want to submit the form by default. This post shows a workaround for this.

Reason for the workaround

The reason I needed to do this workaround myself was with a form that had client-sided validation when it was submitted, but had a secondary button earlier in the form which required the client-sided validation to be bypassed because it was updating something else.

The problem was that pressing <enter> in one of the text fields would effectively press that button and not the main submit button, therefore bypassing the validation and running the process on the server-side that was supposed to be triggered only when the main submit was actually clicked.

The workaround

The workaround is to put a regular submit button at the start of the form in a way that a user cannot see, but which the browser will still use as the default submit button.

This can be achieved by doing this as the start of the form (although the styles should ideally be moved into an external style sheet rather than be inline):

<div style="height:0px; width:0px; position:absolute; overflow:hidden">
    <input type="submit" />
</div>

I have tested this and it works in IE6, IE7, IE8, FF1, FF3.5, Chrome 4.