Tutorial :Submitting a form on 'Enter' with jQuery?


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?


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

NOTE: You accepted bendewey's answer, but it is incorrect with its description of e.preventDefault(). Check out this stackoverflow answer: event.preventDefault() vs. return false

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


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



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.


Return false to prevent the keystroke from continuing.


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


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 with this type of functionality it's as simple as this:

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


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:


<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


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

c = e.which ? e.which : e.keyCode;    if (c == 13) ...  


This is my code:

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


I use now


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


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>  


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


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

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »