javascript - Submit form when enter is pressed using jQuery submit() - Stack Overflow

admin管理员组

文章数量:1315313

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>

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>

• javascript
• jquery

Share Improve this question Follow edited Aug 14, 2013 at 10:47 Liam 29.8k2828 gold badges138138 silver badges202202 bronze badges asked Feb 19, 2011 at 10:05 yodayoda 11k1919 gold badges6767 silver badges9393 bronze badges 8

• could you show some html as well? – xzyfer Commented Feb 19, 2011 at 10:10
• What is your HTML? Could it be that your form has ID #login? Where do you attach the key handler to? What does it do? Please add this part too. What do you mean by not working? login is not called? – Felix Kling Commented Feb 19, 2011 at 10:11
• And post the non working source on jsfiddle if possible? – Dogbert Commented Feb 19, 2011 at 10:11
• 2 As an aside, you can just do $('#login form').submit(login);, it'll get the same parameters as any anonymous function, so you'll get the event you want, same goes for .click(login). – Nick Craver Commented Feb 19, 2011 at 10:13
• Why don't you have a normal <input type="submit"> button? Users with JS disabled won't be able to use your site. (still missing how you attach the key event handler and what it does) – Felix Kling Commented Feb 19, 2011 at 10:17

 |  Show 3 more ments

4 Answers 4

Sorted by: Reset to default 3

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 bees 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/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.

本文标签： javascriptSubmit form when enter is pressed using jQuery submit()Stack Overflow