I have a wizard-style HTML form with a row of submit buttons for the Back/Next/Cancel actions (in that order). The form can also contain a varying number of input fields, such as text fields, radio buttons, checkboxes, dropdowns (select tags), and textareas. The customer requires the ‘Next’ button to be the default action, so that if the user types into a text field and presses Enter, it should submit the form as if they had clicked the ‘Next’ button.
The problem is that in this scenario, the browser (at least IE, which is what 99% of our customers use) submits the form using the first button declared in the form, which as you can see from the above list is ‘Back’, not ‘Next’ as desired.
One fix I read about is to declare the Back and Next buttons in reverse order (i.e. Next first) then use CSS to display them around the right way, like so:
<html> <head> <style type='text/css'> .formSubmitButtons { direction: rtl; float: left; } .formSubmitButtons input { direction: ltr; float: none; } </style> </head> <body> <form action='blah' method='POST' enctype='application/x-www-form-urlencoded'> <div class='formSubmitButtons'> <input type='submit' name='btnNext' value='Next'> <input type='submit' name='btnBack' value='Back'> </div> <input type='submit' name='btnCancel' value='Cancel'> <br/>Some text fields go here... </form> </body> </html> This provides the desired behaviour and button order in both Firefox and IE, however the spacing of the Cancel button relative to the others is inconsistent. In IE6 it looks nice enough, but in Firefox 3.0.5, the Cancel button is jammed up against the Next button.
Does anyone know what CSS magic I need to weave in order to get these three buttons to space evenly in both browsers?
(avoiding the issue by sorting the buttons Next/Back/Cancel is not an option)
(also thanks to everyone who suggested JavaScript-based solutions, but not all our customers allow JS, so it has to be a straight HTML and/or CSS solution)
Here’s what I ended up doing that worked nicely (based on Cletus’s suggestion):
<!-- <input type='submit' name='btnNext' style='position: absolute; left: -9999px' tabindex='-1'> <input type='submit' name='btnBack' value='Back'> <input type='submit' name='btnNext' value='Next'> <input type='submit' name='btnCancel' value='Cancel'> --> (ignore the wrapping comment tags, they’re just so you can see the HTML)
Have you considered using this trick? Basically you just have a hidden button appear first which does the desired action.