Submit form when enter is pressed using jQuery submit()

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>

---

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.

---

updated

What you need is to have an <input type=submit>. However you can choose to hide it off screen. That way you get the submition on enter for free.

Keep in mind though you can't hide the submit with display:none of changing visibility because it then becomes an inactive element, and won't work on most browsers.

---

Try to include a hidden submit button in your form.

updated Okay, that would work in Firefox, but not in Chrome. IE, I suppose, won't handle it too.

Well, you can go script way http://jsfiddle.net/GqHzZ/. Add a keypress handler on all event fields that would trigger the submit function, like this:

$(document).ready(function(){
    $('#login form input').keypress(function(e) { if(e.which == '13')login(e); });

---

With webkit based browsers (Chrome, Safari) I've found that trying to do certain "on click" events, submits and other things with a blank href element in your anchor tag won't work.

<a href="" id="dologin">LOGIN</a>

The reason is simply that your href is blank.

If you set it as pretty much anything, for example # and return false in your jQuery ... webkit will work just like Firefox, and other browsers.

The return false part, btw ... prevents the "default action" which would be to "follow" the # link.

HTML

<a href="#" id="submitbutton">LOGIN</a>

jQuery

<script>
 $(document).ready(function() {
    $('#submitbutton').click(function() {
        $('#someForm').submit();
        return false;
    }); 
 });
</script>

This is even more strictly enforced (it seems) on mobile webkit, i.e. iPhone, iPad, Android.