Question
Let's say you create a Wizard in an HTML form. One button goes back and one goes forward. Since the back button appears first in the markup, when you press Enter it will use that button to submit the form.
Example:
<form>
<input type="text" name="field1" /> <!-- put your cursor in this field and press Enter -->
<input type="submit" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
<input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>
What I would like to do, is get to decide which button is used to submit the form when a user presses Enter. That way, when you press Enter the Wizard will move to the next page, not the previous. Do you have to use tabindex to do this?
Answer
I hope this helps. I'm just doing the trick of floating the buttons on the right - like in normal wizard :-)
This way the Prev button is left of the Next button but the Next comes first in the HTML code:
<html>
<head>
<style>
.f {
float: right;
}
</style>
</head>
<body>
<form action="action" method="get">
<input type="text" name="abc">
<div id="buttons">
<input type="submit" class="f" name="next" value="Next">
<input type="submit" class="f" name="prev" value="Prev">
<div style="clear:both"></div><!-- Need this to have the buttons actually inside div#buttons -->
</div>
</form>
</body>
</html>
Hope this helps... :-)
Edit: Benefits over other suggestions: no JavaScript, accessible, both buttons remain type="submit"
0 comments:
Post a Comment