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 disable the form submit on enter button using jQuery?
In this article, we will learn how to disable the form submit behavior with the press of enter button using jQuery, and its element selector feature and “keypress” event listener.
Form submission disabling can be useful in cases where it requires some validation on some input fields. For example, a form with the name and email required should not ideally have the submit button enabled until those required fields are provided with some values. In these types of cases, we can disable the form submission dynamically to achieve the desired outcome.
Here, we will disable the form submission flow specifically only when the enter key is pressed by the user to submit it. We will place a “keypress” event listener on the form, and detect whether the key pressed in an enter key. If it is, we will return false from the form submission flow.
Let’s understand this with the help of some examples −
Example 1
In this example, we will create a form with different inputs including Email, first name, and last name, and we will place a “keypress” event listener on the form to detect enter key and disable the form submission.
Filename: index.html
<html lang="en">
<head>
<title>How to disable form submit on enter button using jQuery?</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
</head>
<body>
<h3>How to disable form submit on enter button using jQuery?</h3>
<form id="myForm" style="display: flex; flex-direction: column; gap: 10px; max-width: 300px;">
<input type="email" name="email" placeholder="Enter your email">
<input type="text" name="firstName" placeholder="Enter your first name">
<input type="text" name="lastName" placeholder="Enter your last name">
<input type="submit" name="submit" value="Submit">
</form>
<script>
$(document).ready(function(){
$('#myForm').keydown(function(event){
if(event.keyCode == 13) {
alert('You pressed enter! Form submission will be disabled.')
event.preventDefault();
return false;
}
});
});
</script>
</body>
</html>
Example 2
In this example, we will create a login form with email and password fields, and we will disable the form submission on enter key press until both fields are filled out.
Filename: index.html
<html lang="en">
<head>
<title>How to disable form submit on enter button using jQuery?</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
</head>
<body>
<h3>How to disable form submit on enter button using jQuery?</h3>
<form id="loginForm" style="display: flex; flex-direction: column; gap: 10px; max-width: 300px;">
<input type="email" name="email" placeholder="Enter your email">
<input type="password" name="password" placeholder="Enter your password">
<input type="submit" name="submit" value="Login" disabled>
</form>
<script>
$(document).ready(function(){
$('#loginForm input').on('keyup', function(){
if($('#loginForm input[name="email"]').val() !== '' && $('#loginForm input[name="password"]').val() !== '') {
$('#loginForm input[name="submit"]').prop('disabled', false);
} else {
$('#loginForm input[name="submit"]').prop('disabled', true);
}
});
$('#loginForm').keydown(function(event){
if(event.keyCode == 13 && ($('#loginForm input[name="email"]').val() === '' || $('#loginForm input[name="password"]').val() === '')) {
alert('Please fill out both email and password fields to login.')
event.preventDefault();
return false;
}
});
});
</script>
</body>
</html>
Example 3
In this example, we disable the form submit behavior on enter button using 3 different methods. In the first method, we capture the keypress event and check for the pressed key. In the second method, we disable the form submission when the inputs are focused. In the third method, we use the onkeydown attribute and capture the keydown event.
Filename: index.html
<html lang="en">
<head>
<title>How to disable form submit on enter button using jQuery?</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>
<body>
<h3>How to disable form submit on enter button using jQuery?</h3>
<form id="loginForm" style="display: flex; flex-direction: column; gap: 10px; max-width: 300px;">
<input type="email" name="email" placeholder="Enter your email">
<input type="password" name="password" placeholder="Enter your password">
<input type="submit" name="submit" value="Login">
</form>
<script>
$(document).ready(function() {
// Method 1: Capture Keypress Event and Check for Enter Key
$('#loginForm').keypress(function(event) {
if (event.which === 13 && ($('#loginForm input[name="email"]').val() === '' || $('#loginForm input[name="password"]').val() === '')) {
alert('Please fill out both email and password fields to login.');
event.preventDefault();
return false;
}
});
// Method 2: Disable Submit Button on Input Focus
$('#loginForm input[name="email"], #loginForm input[name="password"]').focus(function() {
$('#loginForm input[name="submit"]').prop('disabled', true);
});
$('#loginForm input[name="email"], #loginForm input[name="password"]').blur(function() {
if ($('#loginForm input[name="email"]').val() !== '' && $('#loginForm input[name="password"]').val() !== '') {
$('#loginForm input[name="submit"]').prop('disabled', false);
}
});
// Method 3: Use onkeydown attribute
$('#loginForm input[name="email"], #loginForm input[name="password"]').on('keydown', function(event) {
if (event.keyCode === 13) {
event.preventDefault();
return false;
}
});
});
</script>
</body>
</html>
Conclusion
In this article, we learned how to disable the form submission flow on enter button keypress using jQuery, and its element selector feature and “keypress” event listener. We placed the event listener on the form and checked whether enter key is pressed by the user. If it is, we return false from the form submission flow.
631 Views
