In a wizard-type form, there are two buttons present. The Back button is positioned on the left side, while the Next button is located on the right side. For an example of this setup, visit http://jsfiddle.net/WSwb7/1/. Please note that submitting the form through this link will not function properly.
I initially assumed that setting the Next button as <input type="submit" would allow it to be triggered for submission when the user presses Enter in any form field. However, it seems that pressing Enter actually causes the browser to use the first button in the HTML markup, which happens to be the Back button on the left-hand side (inside a <button>). I tested this behavior in FF 30, Chromium 33, and IE 11, leaving me curious if it's specified in any standard documentation.
My dilemma lies in figuring out how to enable form submission upon Enter keypress using the Next button, while keeping it positioned on the right side of the Back button. Given that I utilize Bootstrap, one might assume that a simple swap of the buttons in the code coupled with CSS positioning could resolve this issue without requiring JavaScript.
Is there a way to accomplish this task? Ideally, the buttons should remain centered within a <div> underneath the form.
(On a side note, might employing a right-to-left script help prevent such complications?:)