Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to submit a form on Enter button using jQuery?
jQuery- a very popular JavaScript library that simplifies the process of HTML document manipulation, event handling, and animation. It consists of a set of functions that are used to traverse, manipulate, and modify HTML elements on the page. It is also cross-browser compatible and works seamlessly with most modern browsers.
We always used forms on our websites whether in the form of the login page, contact us section, etc. There we always have to submit the form by clicking the button but how it can be possible to submit a form using the Enter key? Submitting a form is a common requirement in web development. It is a useful feature that can save time and provide a better user experience. With the help of the jQuery library, it can be done with ease and efficiency.
In this article, we will learn how to submit a form on the Enter button using jQuery. We will also learn the different approaches to performing this task. Some common approaches to submit the form with the press of the Enter key or button in jQuery are using the “keypress” event, “keydown” event, and “keyup” event.
Method to Submit a Form on Enter Button in jQuery
There are multiple methods available to submit a form on Enter button using jQuery. Let’s see some of the common methods used in submitting a form on Enter.
Method 1: Using the Keypress Event
In this method, we are going to use the keypress event to submit a form on enter button using jQuery. The keypress event is triggered when a key is pressed down while the focus is on an element and to submit the form, we have to check if the key code of the pressed key is equal to the code for the Enter key (which is 13). If it is correct then, we can trigger the form's submit method.
Syntax
Below is the syntax to submit a form on enter using the keypress event in jQuery.
$(document).on("keypress", "form", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
alert("You have successfully submitted the form!");
$(this).submit();
}
});
Example
The given example uses the "keypress" event to detect when the Enter key is released while the user is focused on a form element. The $(this).submit() line is used to submit the form after displaying an alert message.
<html>
<head>
<title>Submit Form on Enter Key using keypress event</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form>
<label for="email">Enter your email:</label>
<input type="text" id="email" name="email" required>
<br><br>
<label for="password">Enter your password:</label>
<input type="password" id="password" name="password" required>
<br><br>
<input type="submit" value="Submit">
</form>
<script>
$(document).on("keypress", "form", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
// Alerts the user when the Enter key is pressed
alert("You have successfully submitted the form!");
$(this).submit();
}
});
</script>
</body>
</html>
Method 2: Using the Keyup Event
In this method, we are going to use the keyup event to submit a form on enter button using jQuery. A Keyup event is triggered when a key is pressed down before it is actually released. Here, to submit the form, make sure the key code of the pressed key is equal to the code for the Enter key (which is 13). If it is, the event will get triggered.
Syntax
Below is the syntax to submit a form by entering using the keyup event in jQuery.
$(document).on("keyup", "form", function(event){
if (event.keyCode === 13) {
event.preventDefault();
alert("You have successfully submitted the form!");
$(this).submit();
}
});
Example
The given example uses the "keyup" event to detect when the Enter key is released while the user is focused on a form element. The $(this).submit() line is used to submit the form after displaying an alert message.
<html>
<head>
<title>Submit Form on Enter Key using keyup event</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form>
<label for="email">Enter your email:</label>
<input type="text" id="email" name="email" required>
<br><br>
<label for="password">Enter your password:</label>
<input type="password" id="password" name="password" required>
<br><br>
<input type="submit" value="Submit">
</form>
<script>
$(document).on("keyup", "form", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
// Alerts the user when the Enter key is pressed
alert("You have successfully submitted the form!");
$(this).submit();
}
});
</script>
</body>
</html>
Method 3: Using the Keydown Event
In this method, we are going to use the keydown event to submit a form on enter button using jQuery. A keydown event is triggered when a key is released after being pressed down. Here, to submit the form, make sure the key code of the pressed key is equal to the code for the Enter key (which is 13). If it is, the event will get triggered.
Syntax
Below is the syntax to submit a form on enter using the keydown event in jQuery.
$(document).on("keydown", "form", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
alert("You have successfully submitted the form!");
$(this).submit();
}
});
Example
The given example uses the "keydown" event to detect when the Enter key is released while the user is focused on a form element. The $(this).submit() line is used to submit the form after displaying an alert message.
<html>
<head>
<title>Submit Form on Enter Key using keydown event</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form>
<label for="email">Enter your email:</label>
<input type="text" id="email" name="email" required>
<br><br>
<label for="password">Enter your password:</label>
<input type="password" id="password" name="password" required>
<br><br>
<input type="submit" value="Submit">
</form>
<script>
$(document).on("keydown", "form", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
// Alerts the user when the Enter key is pressed
alert("You have successfully submitted the form!");
$(this).submit();
}
});
</script>
</body>
</html>
Conclusion
jQuery is a widely used JavaScript library that simplifies the process of HTML document manipulation, event handling, and animation. The library has multiple methods that can be used to submit a form on the Enter button using jQuery. The keypress, keyup, and keydown events are the most commonly used methods for submitting a form. Each method involves detecting the Enter key's key code and triggering the form's submit method. By implementing these methods, web developers can provide a better user experience by allowing users to submit forms using the Enter key.
3K+ Views
