Jul 04, 2024 | jQuery Javascript HTML
Hello Dev,
I'll explain a way to save you a form from submitting while the Enter key is pressed, besides when typing in a textarea. This may be performed the usage of JavaScript or jQuery.
When customers fill out paperwork, urgent Enter frequently submits the shape, which won't constantly be desired. For normal enter fields like textboxes, you would possibly need to save you submission to ensure users click the publish button intentionally. However, in a textarea wherein customers would possibly want to enter multiline textual content, Enter must function generally.
To reap this, you could use JavaScript or jQuery to intercept the Enter key press occasion on enter fields and prevent the default shape submission behavior. Here’s how you could technique it:
Example 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prevent Form Submit on Enter Key (Except Textarea)</title>
</head>
<body>
<h2>Prevent Form Submit on Enter Key Example</h2>
<form action="submit.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4"></textarea><br><br>
<input type="submit" value="Submit">
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('form input[type=text]').keypress(function(e) {
if (e.which === 13 && !$(e.target).is('textarea')) {
e.preventDefault();
return false;
}
});
});
</script>
</body>
</html>
Read Also: How to Get Selected Checkbox Value in Checkboxlist using JQuery?
Example 2: JavaScript Approach
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prevent Form Submit on Enter Key (Except Textarea)</title>
</head>
<body>
<h2>Prevent Form Submit on Enter Key Example</h2>
<form action="submit.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4"></textarea><br><br>
<input type="submit" value="Submit">
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
document.addEventListener('keydown', function(event) {
if (event.key === "Enter" && !event.target.matches('textarea')) {
event.preventDefault();
}
});
</script>
</body>
</html>
Read Also: How to Get Root Path in Laravel Application?
Example 3: jQuery Approach
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prevent Form Submit on Enter Key (Except Textarea)</title>
</head>
<body>
<h2>Prevent Form Submit on Enter Key Example</h2>
<form action="submit.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4"></textarea><br><br>
<input type="submit" value="Submit">
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).on('keydown', function(event) {
if (event.key === "Enter" && !$(event.target).is('textarea')) {
event.preventDefault();
}
});
</script>
</body>
</html>
Read Also: How to Disable a Anchor Tag in Using HTML?
Feel free to ask if you have any questions or need further clarification!
"Hey there! I'm a full-stack developer and proud owner of ItErrorSolution.com, based right here in India. I love nothing more than sharing handy tips and tricks with my fellow developers through easy-to-follow tutorials. When it comes to coding, I'm all about PHP, Laravel, Angular, Vue, Node, JavaScript, jQuery, CodeIgniter, and Bootstrap – been hooked on them forever! I'm all about putting in the work and staying committed. Ready to join me on this journey to coding?"