Submit form when enter is pressed using jQuery submit()

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>

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
– Felix Kling, Commented Feb 19, 2011 at 10:11
And post the non working source on jsfiddle.net if possible? — Dogbert
– Dogbert, Commented Feb 19, 2011 at 10:11
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
– 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
– Felix Kling, Commented Feb 19, 2011 at 10:17

Felix Kling · Accepted Answer · 2011-02-19 10:38:18Z

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.

edited Feb 19, 2011 at 10:38

answered Feb 19, 2011 at 10:25

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ravi Jethva Over a year ago

if i want to submit by this method why i need javascript

xzyfer · Accepted Answer · 2011-02-19 10:26:29Z

1

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.

edited Feb 19, 2011 at 10:26

answered Feb 19, 2011 at 10:18

xzyfer

14.2k5 gold badges37 silver badges46 bronze badges

Comments

unclenorton · Accepted Answer · 2011-02-19 10:34:25Z

1

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); });

edited Feb 19, 2011 at 10:34

answered Feb 19, 2011 at 10:26

unclenorton

1,63511 silver badges19 bronze badges

Comments

Justin Jenkins · Accepted Answer · 2012-01-30 06:57:41Z

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.

Collectives™ on Stack Overflow

Submit form when enter is pressed using jQuery submit()

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related