Submitting a form on 'Enter' with jQuery?

Question

I have a bog-standard login form - an email text field, a password field and a submit button on an AIR project that's using HTML/jQuery. When I hit Enter on the form, the entire form's contents vanish, but the form isn't submitted. Does anyone know if this is a Webkit issue (Adobe AIR uses Webkit for HTML), or if I've bunged things up?

I tried:

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

But that neither stopped the clearing behavior, or submitted the form. There's no action associated with the form - could that be the issue? Can I put a javascript function in the action?

Answer 1

Return false to prevent the keystroke from continuing.

Answer 2

In addition to return false as Jason Cohen mentioned. You may have to also preventDefault

e.preventDefault();

Answer 3

Pressing Enter should submit the form as normal - you wouldn't need (or want) to stop the event.

Are you certain the form is not submit, and that it's not reloading the same page after submission?

Answer 4

Is there any reason you have to hook and test for the enter key?

Couldn't you simply add a

<input type="submit" />

to your form and have it naturally be submitted when enter is pushed? You could even then hook the form's onsubmit action and call a validation function from there if you wanted...

You could even use the onsubmit as a test to see if your form is being submitted, but it won't work if you call form.submit().

Answer 5

Don't know if it will help, but you can try simulating a submit button click, instead of directly submitting the form. I have the following code in production, and it works fine:

    $('.input').keypress(function(e) {
        if(e.which == 13) {
            jQuery(this).blur();
            jQuery('#submit').focus().click();
        }
    });

Note: jQuery('#submit').focus() makes the button animate when enter is pressed.

Answer 6

Also to maintain accessibility, you should use this to determine your keycode:

c = e.which ? e.which : e.keyCode;

if (c == 13) ...

Answer 7

You may want to check this out, it's a jquery plugin to detect when the enter key is pressed: http://plugins.jquery.com/project/SafeEnter

Answer 8

I use now `$("form").submit(function(event)' At first I added an eventhandler to the submit button which produced an error for me.