Handle user hitting 'Enter' key in a ASP.NET MVC web site

Question

I am working on a ASP.NET MVC web site that has multiple submit buttons. i.e.

    <input type="submit" name="SubmitButton" value="Reset" />
    <input type="submit" name="SubmitButton" value="OK" />
    <input type="submit" name="SubmitButton" value="Back" />

I need to allow users to quickly submitting the form by pressing the 'Enter' key. HTML standard seems to specify that the first submit button will be assumed if a user press the 'Enter' key. However, I need to make the 2nd button (i.e. the "OK") button the default button and for reasons I don't even want to talk about, changing the button order is not an option.

I googled around and I found this post about using Page.Form.DefaultButton in ASP.NET but this doesn't work with ASP.NET MVC.

I also tried the following javascript solution, while it works in Chrome but doesn't work in IE6

    $('body').keypress(function(e) {
       if (e.which === 13) {
          $("input[value='OK']").trigger('click');
       }
    });

I can think of some really extreme solutions such as going through every single controls in the form an attach the above function to them. However, I don't think that's a very neat solution so I am wondering has anyone got a better solution?

Answer 1

Change button order in source but not visually (ie, use CSS to swap the buttons)?

Answer 2

First off, this is wrong:

<input type="submit" name="SubmitButton" value="Reset" />
<input type="submit" name="SubmitButton" value="OK" />
<input type="submit" name="SubmitButton" value="Back" />

All three of them are submit buttons. A reset is an input of type="reset". Get that sorted. Second of all, I've successfully implemented something like that, and it works on IE6. Try this:

    function keypressHandler(e)
    {
        if(e.which == 13) {
            $(this).blur();
            $('#SubmitButton').focus().click();//give your submit an ID
        }
    }

    $('#myForm').keypress(keypressHandler);

The focus() part makes the button appear to be pressed when the user presses enter. Quite nifty.

Answer 3

You should only have one submit button. The reset button should be type="reset" and the back button should probably be type="button" like this:

<input type="reset" name="ResetButton" value="Reset" />
<input type="submit" name="SubmitButton" value="OK" />
<input type="button" name="BackButton" value="Back" />

Then, Reset and OK will just work the way they are supposed to and you'll only need to handle the Back button click with Javascript.

Edit: The other option would be to place the Reset and Back submit buttons each in their own forms inside iframes. Then they would be ignored by the main form and wouldn't be default buttons. Also, this would allow you to point them to different server actions if needed and there wouldn't be any reliance on Javascript for the button actions.

Answer 4

Use this.

$(function(){
    $('input').keydown(function(e){
        if (e.keyCode == 13) {
            $("input[value='OK']").focus().click();
            return false;
        }
    });
});

Answer 5

Since you use jquery, if you use hotkeys plugin, you can make a such approach:

$(document).bind('keydown', 'return', function (evt){
    $.next("input[value='OK']").trigger("click");
    return false;
});

Answer 6

HTML standard seems to specify that the first submit button will be assumed if a user press the 'Enter' key.

No, the usage of the enter key isn't defined, it's a propritary extension that's been added under various interpretations. You will get different behavoir in different browsers (and it can become very dangerous when you start mixing in different cultural or UI conventions about left to right/right to left ordering of options).

If there is only 1 button on the form then all the mainstream browsers happen to follow the same behavior - they submit the form as if that button was pressed (a buttonName=buttonValue is included with the form data). Of course this doesn't mean the buttons onclick handler is going to fire - that behavoir is browser specific.

When there are several buttons it's a complete crap shoot. Some browsers decide that the first button (and the definition of first can vary - most use the first one mentioned in the Html tree, while others attempt to use screen position) was clicked and use it in the submission, while other browsers (notably some versions of IE) make the equally correct assumption that no specific button was pressed, and so don't include a buttonName=buttonValue (the rest of the form is submitted fine).