How to Trigger a Click Event on Pressing Enter Key Using jQuery

by

This tutorial brings the concept to trigger a click event on pressing Enter Key using jQuery. Generally, We submit the input data by clicking the submit button of the HTML form. If we Implement a trigger event on pressing the ENTER key in the form then we will not need to click the Form button.

Trigger Click Event is the most useful feature. It will take the form user-friendly & attractive. Even You can use it with various types of tasks that will be executed on the click button.

trigger click event on pressing enter key using jquery

Trigger Click Event on Pressing Enter Key with JQuery

Now, I’m going to explain this tutorial with a simple example. read all the given points carefully. You will definitely learn to implement it with click events on any type of HTML element.

Read Also –

Close Modal on Click Outside Anywhere Using jQuery

Add and Remove Input Field Using jQuery

1. Create an HTML Form

I am going to create a form with only a single text input field for only learning purpose. Otherwse, you can create more different type of input field according to your project requirement.

You have to create a HTML form with the help of the following steps –

  • Create a Text Input with id='formInput'
  • Also, Create a button with id="submitButton"

File Name – index.php

<!DOCTYPE html>
<html>
<head>
  <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
</head>
<body>
  
<form method="post">
  <input type="text" id='formInput'>
  <input type="text">
  <button id="submitButton">Submit</button>
</form>

</body>
</html>

2. Trigger Click Event on Pressing Enter Using jQuery

Now, configure the following points –

  • Apply keydown(), keypress() or keyup() even method to the input field #formInput.
  • If Keycode is equal to 13 using event.which then write the following script.
    • Declare event.preventDefault() to stop refreshing the page & submitting the form
    • keydown event will apply on the textbox with #formInput
    • If the keycode  of Enter Key is equal to 13 then the submit button will be the trigger and it was clicked.
    • Trigger Click button #submitButton using $('#submitButton').click()
    • Declare success message using alert()

File Name – custom1.js

Get code to trigger a click event on press Enter after placing the cursor in the text input field

$(document).ready(function(){
    $("#formInput").keydown(function (event) { 
     if (event.which == 13) { 
         event.preventDefault();
         $('#submitButton').click(); 
         alert('click event was trigger'); 
     } 
    });
});

File Name – custome2.js

$(document).keydown(function (e) {
  
 if (e.which == 13) {
  e.preventDefault();
  $('#submitButton').click();
  alert('Click button was trigger');
 }
});

 

Get code to trigger a click event on press Enter after placing the cursor anywhere on the whole page.

Using This code, you can submit the input data of any kind of HTML form by just pressing Enter. You need not change anything in this code. just copy and paste it where you want to use it. But You should keep one thing in your mind that would declare id as it is given in this tutorial. ‘

If you want to change the id of the text input the field, you can but you will have to declare the same id in the custom jquery code.

I have explained the above two points so that you would not face any issues with this code. I hope, you have definitely got my points. Now you can use it without thinking anymore.

My Suggestion

Now, you have understood how to trigger an HTML element by pressing ENTER Key. If you have any questions related to this tutorial, you can ask me through the below comment box. I will reply as soon as possible.