Form SUBMIT example using ENTER key in JavaScript, jQuery and ExtJs

Well I get this request all the time from users that we want the form to submit when we press the ENTER key rather than actually clicking on the SUBMIT button. This is a much better user experience if you say for example type an user name and password, then press ENTER instead of using the mouse to click on the LOGIN button. In this tutorial we are going to learn how to do this using plain JavaScript, jQuery and ExtJs frameworks. The basic concept behind all of them is to capture the Keypress event and then check if the event keyCode is 13, which is the ENTER key. In these examples we are checking if the ENTER key was pressed but you can modify the program to check for TAB, HOME, ARROW keys etc.

JavaScript ENTER key example



JavaScript ENTER key example

<!DOCTYPE html>
<html>
<head>
<title>JavaScript how to check for ENTER key</title>

<script type="text/javascript">
window.onload = function(){
   
 //get reference to the password element
    var password = document.getElementById("password");
 //bind the onkeypress event to the password field
 password.onkeypress = function(event){
     checkEnterPressed(this,event);
     event.cancelBubble = true;
     if (event.stopPropagation) event.stopPropagation();
    };
    //if you want to press enter anywhere on the page
    document.onkeypress = function(event){
     checkEnterPressed(this,event);
     event.cancelBubble = true;
     if (event.stopPropagation) event.stopPropagation();
    };
    
}
   
function checkEnterPressed(obj, event){
 //console.log(obj, event.keyCode);
 //we are checking for ENTER key here, 
 //you can check for other key Strokes here as well
 if(event.keyCode === 13){
  alert("Login form was submitted by ENTER key!");
 }
}

function doProcessing(){
 
 //your business logic here or
 //submit the form
 alert("Login form was submitted by BUTTON Click!");
}
</script>

</head>
<body>
<div id="myExample">
 <form id="myForm" action="">
  <fieldset>
  <p>
   <label for="userId">
    UserId:
   </label><br /> 
   <input
    id="userId" type="text" name="inputBox" />
  </p>
  <p>
   <label for="password">
    Password:
   </label><br /> 
   <input
    id="password" type="password" name="inputBox" />
  </p>
  <p>
   <input
    id="myButton" type="button" name="myButton" value="SUBMIT" 
    onClick="JavaScript:doProcessing()">
  </p>
  </fieldset>
 </form>
</div>
</body>
</html>

jQuery ENTER key example



jQuery ENTER key example

<!DOCTYPE html>
<html>
<head>
<title>jQuery how to check for ENTER key</title>

<link
 href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
 rel="stylesheet" type="text/css" />

<script
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"
 type="text/javascript"></script>
<script
 src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
 type="text/javascript"></script>
<script type="text/javascript">
        $(document).ready(function() {
         
         //check for the button click
         $("#addToCart").click(function(event){
          //do your validation or any other logic
          alert("Item added to Shopping Cart with BUTTON Click!");
         });
         
         //attach keypress event listener to the quantity field
         $('#quantity').keypress(function(event){
          //Check if the key pressed is ENTER key using the keyCode=13
          if(event.keyCode === 13){
           alert('Item added to Shopping Cart using ENTER Key!'); 
          }
          event.cancelBubble = true;
             if (event.stopPropagation) event.stopPropagation();
         });
         
         //attach keypress event listener to the whole document
         $(document).keypress(function(event){
          if(event.keyCode === 13){
           alert('Item added to Shopping Cart using ENTER Key!'); 
          }
          event.cancelBubble = true;
             if (event.stopPropagation) event.stopPropagation();
         });
         
        });     
</script>
    
</head>
<body>
<div id="myExample">
 <form id="myOrderForm" action="">
  <fieldset>
  <p>
   <label for="itemNumber">
    Item Number:
   </label><br /> 
   <input
    id="itemNumber" type="text" name="itemNumber" />
  </p>
  <p>
   <label for="quantity">
    Quantity:
   </label><br /> 
   <input
    id="quantity" type="text" name="quantity" />
  </p>
  <p>
   <input
    id="addToCart" type="button" name="addToCart" 
    value="Add To Cart">
  </p>
  </fieldset>
 </form>
</div>
</body>
</html>

ExtJs ENTER key example



ExtJs ENTER key example

<!DOCTYPE html>
<html>
<head>
<title>ExtJs how to check for ENTER key</title>

<link rel="stylesheet" type="text/css"
 href="extjs/resources/css/ext-all.css">
<style type="text/css">
</style>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.Loader.setConfig({ 
 enabled: true 
 });

Ext.application({
    
 name: 'myApp',
 appFolder: 'app/enterKey',
    
    controllers: [
                  'MyController'
              ],

    launch: function() {
 Ext.create('Ext.container.Container', {
         renderTo: 'myExample',
         height: 250,
            width: 300,
         layout: {
                align: 'stretch',
                type: 'vbox'
            },
         defaults: { 
            labelWidth: 100,
            margin: '5 5 5 5 '
         },
         items: [{
                xtype: 'textfield',
                name: 'userId',
                fieldLabel: 'User Id'
            },{
             xtype: 'textfield',
                name: 'password',
                fieldLabel: 'Password',
                inputType: 'password'
            },{
             xtype: 'button',
                text: 'Login'
            }]
        });
    }
}); 
    </script>

</head>
<body>
 <div id="myExample"></div>
</body>
</html>

Ext.define('myApp.controller.MyController', {
 extend : 'Ext.app.Controller',

 init : function() {
  this.control({

   'container' : {
    render : this.onContainerRendered
   },
   'container button' : {
    click : this.onButtonClick
   },
   'container textfield' : {
    specialkey : this.onKeyPress
   }
  });
 },

 onContainerRendered : function() {
  //console.log('The container was rendered');
 },

 onButtonClick : function(button) {
  //console.log('Button Click');
  //your form validations here
  Ext.Msg.alert("ALERT","Login form was submitted using BUTTON Click!");
 },
 
 onKeyPress : function(obj, event) {
  //console.log('Navigation keys such as arrows, tab, enter, esc, etc.');
  //your form validations here, various ExtJs Key events
  //event.HOME, event.END, event.PAGE_UP, event.PAGE_DOWN, event.TAB, event.ESC
        //arrow keys: event.LEFT, event.RIGHT, event.UP, event.DOWN
        if (event.getKey() == event.ENTER) {
   Ext.Msg.alert("ALERT","Login form was submitted using ENTER Key!");
        } 
 }

});

References