views:

653

answers:

5

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 enter button. Kind of like setting it as the default submit button, even though there are other buttons before it.

+1  A: 

I think this is what you're looking for. The example there traps the enter key on a given input and submits the form as if the user clicked on the button element whose css class is set to 'default'.

Zoran Regvart
+3  A: 

You should not be using buttons of the same name. It's bad semantics. Instead, you should modify your backend to look for different name values being set:

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

Since I don't know what language you are using on the backend, I'll give you some pseudocode:

if (input name COMMAND_PREV is set) {

} else if (input name COMMAND_SAVE is set) {

} else if (input name COMMENT_NEXT is set) {

}
cballou
+1 relying on the `value` of buttons to decide which was clicked is extremely fragile. Any little UI change or localisation work then requires the backed to be changed to detect it. Also with non-ASCII characters in there you'll need to be absolutely sure that your encodings are set correctly everywhere!
bobince
Umm... I can live with that but this still means "Prev" acts as the "Default" button.
Salman A
@Salman, you should use my suggestion in combination with the suggestion from @cletus regarding CSS positioning to ensure you properly declare your default button first.
cballou
+4  A: 

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.

cletus
Any other possible "CSS" positioning trick?
Salman A
I managed to push the next button to the right by (1) floating it right (2) all other buttons floated left (3) all buttons displayed block (4) all buttons, including next button, specified in source order.
Salman A
+1  A: 

The first button is always the default; it can't be changed. Whilst you can try to fix it up with JavaScript, the form will behave unexpectedly in a browser without scripting, and there are some usability/accessibility corner cases to think about. For example, the code linked to by Zoran will accidentally submit the form on Enter press in a <input type="button">, which wouldn't normally happen, and won't catch IE's behaviour of submitting the form for Enter press on other non-field content in the form. So if you click on some text in a <p> in the form with that script and press Enter, the wrong button will be submitted... especially dangerous if, as given in that example, the real default button is ‘Delete’!

My advice would be to forget about using scripting hacks to reassign defaultness. Go with the flow of the browser and just put the default button first. If you can't hack the layout to give you the on-screen order you want, then you can do it by having a dummy invisible button first in the source, with the same name/value as the button you want to be default:

<input type="submit" class="defaultsink" name="COMMAND" value="Save" />

.defaultsink {
    position: absolute; left: -100%;
}

(note: positioning is used to push the button off-screen because display: none and visibility: hidden have browser-variable side-effects on whether the button is taken as default and whether it's submitted.)

bobince
A: 

If you're using jQuery, this solution from a comment made here is pretty slick:

$(function(){
    $('form').each(function () {
        var thisform = $(this);
        thisform.prepend(thisform.find('button.default').clone().css({
            position: 'absolute',
            left: '-999px',
            top: '-999px',
            height: 0,
            width: 0
        }));
    });
});

Just add class="default" to the button you want to be the default. It puts a hidden copy of that button right at the beginning of the form.

Dave