Question

I have a handler to catch the event of an “enter” inside a set of inputs in the context of an authentication function, but it’s not working when I press the key. The code is as follows :

$('#login form').submit(function(e) { login(e); });

function login(e)
{
    e.preventDefault();

    var l = $('#logo a').attr('href');
    var name = $('#login input[name="login_username"]').val();
    var pass = $('#login input[name="login_password"]').val();

    $.ajax({
        type: 'POST',
        url: l+'user/login',
        data: 'username='+name+'&password='+pass,
        cache: false,
        dataType: 'json',
        success: function(response)
        {
            if (response.status == true)
                window.location = response.redirect;
            else
                jQuery.facebox('<p class="facebox-notice">'+response.error+'</p>');
        }
    });
}

It does work, however, to the button I have for the same purpose :

$('#dologin').click(function(e) { login(e); });

Any ideas why? Cheers!

EDIT

The markup is as follows :

<div id="login">
  <form action="" method="post">
    <input type="text" name="login_username" />
    <input type="password" name="login_password" />
    <a href="" id="dologin">LOGIN</a>
  </form>
</div>

Answer 1

So your goal is to submit the form when Enter is pressed, correct?

The easiest way to achieve this is to use a submit button

<input type="submit" value="Login" />

instead of the link. Then the event is handled by the browser.

DEMO

If you prefer to have a link because of the style, you can use CSS to style the button and make it look like a link.