I ran into a problem today with my wizard style forms whereby pressing the Enter key would cause the wizard form to go to the previous page rather than the next one – not exactly desirable behaviour!
It turns out that when there are multiple submit buttons on a form the browser will select the first one it comes across, as HTML does not specify any method for defining the default action on a form. This is fair enough, but in the case of a wizard style form you tend to place the ‘previous’ button on the left and the ‘next’ button on the right, so the first one the browser finds is the ‘previous’ button due to its ordering within the code.
Thankfully, there is a solution which I found on another blog that makes use of the CSS Level 2 direction property. This property affects the direction the browser lays out content inside an element. The default is left to right, but by setting the direction property to rtl the direction of the elements is reversed.
So all I did was apply the direction property to the div containing the buttons and then placed the ‘next’ button first, followed by the ‘previous’. When viewed in the browser the buttons are reversed and displayed in the order you’d expect, but in the code the ‘next’ button comes first, so hitting the Enter key will cause the form to advance forward. Pretty nifty eh?!
This won’t work in older browsers, but it degrades nicely, as the buttons will be displayed in document order and the first submit button will still be used as the default.
Filed under: Browser quirks, CSS
