javascript – Submitting a form on ‘Enter’ with jQuery?

The Question :

437 people think this question is useful

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?

The Question Comments :
  • Do you really have a class=”input” attribute on your <input…? Seems like it should be $(‘input’).keypress…
  • The classes are generated programmatically by a CMS. Other than that, however, scoping it to $(‘input’) would affect every input on the page, regarless of whether I wanted the behavior or not. Sorry it offends your sensibilities.
  • Sensibilities not offended in the least. Just thought it might have been an oversight that lead to the problem. Carry on.
  • FYI: Your accepted answer is not entirely accurate. Refer to my answer below.

The Answer 1

415 people think this answer is useful
$('.input').keypress(function (e) {
  if (e.which == 13) {
    $('form#login').submit();
    return false;    //<---- Add this line
  }
});

Check out this stackoverflow answer: event.preventDefault() vs. return false

Essentially, “return false” is the same as calling e.preventDefault and e.stopPropagation().

The Answer 2

174 people think this answer is useful

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

e.preventDefault();

The Answer 3

83 people think this answer is useful

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.

The Answer 4

61 people think this answer is useful

Return false to prevent the keystroke from continuing.

The Answer 5

30 people think this answer is useful

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().

The Answer 6

15 people think this answer is useful

Here’s a way to do this as a JQuery plugin (in case you want to re-use the functionality):

$.fn.onEnterKey =
    function( closure ) {
        $(this).keypress(
            function( event ) {
                var code = event.keyCode ? event.keyCode : event.which;

                if (code == 13) {
                    closure();
                    return false;
                }
            } );
    }

Now if you want to decorate an <input> element with this type of functionality it’s as simple as this:

$('#your-input-id').onEnterKey(
    function() {
        // Do stuff here
    } );

The Answer 7

12 people think this answer is useful

You can also simply add onsubmit="return false" to the form code in the page to prevent the default behaviour.

Then hook (.bind or .live) the form’s submit event to any function with jQuery in the javascript file.

Here’s a sample code to help:

HTML

<form id="search_form" onsubmit="return false">
   <input type="text" id="search_field"/>
   <input type="button" id="search_btn" value="SEARCH"/>
</form>

Javascript + jQuery

$(document).ready(function() {

    $('#search_form').live("submit", function() {
        any_function()
    });
});

This is working as of 2011-04-13, with Firefox 4.0 and jQuery 1.4.3

The Answer 8

5 people think this answer is useful

This is my code:

  $("#txtMessage").on( "keypress", function(event) {
    if (event.which == 13 &amp;&amp; !event.shiftKey) {
        event.preventDefault();
        $("#frSendMessage").submit();
    }
    });

The Answer 9

4 people think this answer is useful

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

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

if (c == 13) ...

The Answer 10

3 people think this answer is useful

Just adding for easy implementation. You can simply make a form and then make the submit button hidden:

For example:

<form action="submit.php" method="post">
Name : <input type="text" name="test">
<input type="submit" style="display: none;">
</form>

The Answer 11

3 people think this answer is useful

I use now

$("form").submit(function(event){
...
}

At first I added an eventhandler to the submit button which produced an error for me.

The Answer 12

1 people think this answer is useful

I found out today the keypress event is not fired when hitting the Enter key, so you might want to switch to keydown() or keyup() instead.

My test script:

        $('.module input').keydown(function (e) {
            var keyCode = e.which;
            console.log("keydown ("+keyCode+")")
            if (keyCode == 13) {
                console.log("enter");
                return false;
            }
        });
        $('.module input').keyup(function (e) {
            var keyCode = e.which;
            console.log("keyup ("+keyCode+")")
            if (keyCode == 13) {
                console.log("enter");
                return false;
            }
        });
        $('.module input').keypress(function (e) {
            var keyCode = e.which;
            console.log("keypress ("+keyCode+")");
            if (keyCode == 13) {
                console.log("Enter");
                return false;
            }
        });

The output in the console when typing “A Enter B” on the keyboard:

keydown (65)
keypress (97)
keyup (65)

keydown (13)
enter
keyup (13)
enter

keydown (66)
keypress (98)
keyup (66)

You see in the second sequence the ‘keypress’ is missing, but keydown and keyup register code ’13’ as being pressed/released. As per jQuery documentation on the function keypress():

Note: as the keypress event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.

Tested on IE11 and FF61 on Server 2012 R2

The Answer 13

0 people think this answer is useful

In HTML codes:

<form action="POST" onsubmit="ajax_submit();return false;">
    <b>First Name:</b> <input type="text" name="firstname" id="firstname">
    <br>
    <b>Last Name:</b> <input type="text" name="lastname" id="lastname">
    <br>
    <input type="submit" name="send" onclick="ajax_submit();">
</form>

In Js codes:

function ajax_submit()
{
    $.ajax({
        url: "submit.php",
        type: "POST",
        data: {
            firstname: $("#firstname").val(),
            lastname: $("#lastname").val()
        },
        dataType: "JSON",
        success: function (jsonStr) {
            // another codes when result is success
        }
    });
}

The Answer 14

-4 people think this answer is useful

Try this:

var form = document.formname;

if($(form).length > 0)
{
    $(form).keypress(function (e){
        code = e.keyCode ? e.keyCode : e.which;
        if(code.toString() == 13) 
        {
             formsubmit();
        }
    })
}

Add a Comment