Question

I have a jQueryUI button on a form (not a modal dialog). I want it to be fired when the user hits the Enter key. How can I do this? Here is my code:

HTML:

<a href="javascript:void(0);" id="loginButtonInner">Login</a>

JS:

$(document).ready(function ()
{
    $("#loginButtonInner").button(getButtonOptions("ui-icon-unlocked", true));
    $("#loginButtonInner").button("option", "disabled", true);
    $("#loginButtonInner").unbind("click");
}

....

if (userNameValid && passwordValid)
    {       
        $("#loginButtonInner").button("option", "disabled", false);
        $("#loginButtonInner").unbind("click").bind("click", function () { authenticateUser(); return false; });
    }
    else 
    {       
        $("#loginButtonInner").button("option", "disabled", true);
        $("#loginButtonInner").unbind("click");
    }

Currently, I have to tab to reach the button via the keyboard or click via the mouse.

I searched for solutions online, but they all point to a modal dialog form button .

Thanks!

Answer 1

Add a key listener to your form elements and watch for the Enter key, then trigger the click from your button:

$(yourform).find('*').keypress(function(e) {
    if ( e.which == 13 ) { // 13 is the code for Enter key
        e.preventDefault();
        $(yourbutton).click();
    }
});