Search code examples
htmlcssformssubmit-button

Multiple submit buttons on HTML form – designate one button as default

I have a form that has three submit buttons as follows:

<input type="submit" name="COMMAND" value="&lsaquo; Prev">
<input type="submit" name="COMMAND" value="Save">
<input type="reset"  name="NOTHING" value="Reset">
<input type="submit" name="COMMAND" value="Next &rsaquo;">
<input type="button" name="NOTHING" value="Skip &rsaquo;" onclick="location = 'yada-yada.asp';">

The row of buttons is a mix of submit, reset and JavaScript buttons. The order of buttons is subject to change, but in any case the save button remains between prev and next buttons.

The problem here is that when a user hits Enter to submit the form, the post variable "COMMAND" contains "Prev"; normal, as this is the first submit button on the form. I however want the "Next" button to be triggered when the user submits the form via the Enter button. It is kind of like setting it as the default submit button, even though there are other buttons before it.

Solution

  • My suggestion is don't fight this behaviour. You can effectively alter the order using floats. For example:

    <p id="buttons">
<input type="submit" name="next" value="Next">
<input type="submit" name="prev" value="Previous">
</p>

    with:

    #buttons { overflow: hidden; }
#buttons input { float: right; }

    will effectively reverse the order and thus the "Next" button will be the value triggered by hitting enter.

    This kind of technique will cover many circumstances without having to resort to more hacky JavaScript methods.