How to disable form submit on enter button using jQuery ? Last Updated : 03 Aug, 2021 Comments Improve Suggest changes Like Article Like Report There are two methods to submit a form, Using the "enter" key: When the user press the "enter" key from the keyboard then the form submit. This method works only when one (or more) of the elements in the concerned form have focus. Using the "mouse click": The user clicks on the "submit" form button. Approach: First, We need to select the form. This is done using the query selector: $("#form-id") Now, we need to handle the form submission process. For this purpose, we use event handling. Since we need whether the user presses the enter key, we add an event listener on every keypress event: on("keypress", function (event) {} ) This event handler will check every keyboard press, so we require a check on the "enter" key. To accomplish this, we can use the event.keyCode or event.which; event.keyCode: The "keyCode" property returns the Unicode character code of the key that triggered the keypress event. event.which: The "which" property returns the keyboard key (or mouse button) that was pressed for the event. Now, we know that the enter key is pressed, we need to stop the default behavior. To accomplish this, we include a call to the jQuery method preventDefault() to stop the event propagating. preventDefault() preventDefault(): This method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur. Example: html <!DOCTYPE html> <html> <head> <title> Disable form submission on pressing enter key </title> <style> body { display: block; margin-top: 8%; } h1 { color:green; text-align:center; } form { display: block; margin: 0 auto; text-align: center; } input { margin: 4px; } </style> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> </head> <body> <h1>GeeksforGeeks</h1> <form id="form-id"> <label>First name:</label> <input type="text" name="first-name"> <br /> <label>Last name:</label> <input type="text" name="last-name"> <br /> <input type="submit" value="Submit" /> </form> <script> $(window).ready(function() { $("#form-id").on("keypress", function (event) { console.log("aaya"); var keyPressed = event.keyCode || event.which; if (keyPressed === 13) { alert("You pressed the Enter key!!"); event.preventDefault(); return false; } }); }); </script> </body> </html> Output: jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it's philosophy of “Write less, do more". You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples. Comment More infoAdvertise with us Next Article How to disable form submit on enter button using jQuery ? verma_anushka Follow Improve Article Tags : Web Technologies JQuery Write From Home jQuery-Questions Similar Reads How to submit a form on Enter button using jQuery ? Given an HTML form and the task is to submit the form after clicking the 'Enter' button using jQuery. To submit the form using 'Enter' button, we will use jQuery keypress() method and to check the 'Enter' button is pressed or not, we will use 'Enter' button key code value. html <!DOCTYPE html> 2 min read How to disable or enable form submit button in jQuery? Enabling or disabling the form submit button based on a checkbox selection in jQuery. This ensures user compliance with terms and conditions before form submission. Syntax:$('#enabled').click(function () { if ($('#submit-button').is(':disabled')) { $('#submit-button').removeAttr('disabled'); } else 2 min read How to enable/disable a button using jQuery ? Enabling/disabling a button using jQuery involves altering its functionality to either accept user input or not. This is typically done by manipulating its 'disabled' property or attribute through jQuery methods like `.prop()` or .attr().To enable/disable a button using jQuery, you'll need a basic H 2 min read How to stop a form submit action using jQuery ? In this article, we will learn how to stop a form submit action using jQuery. By default, the HTML form submits automatically. Submitting automatically leads to reloading the whole page again and again. Therefore for performing any operation, we have to prevent its default submission. Given a form, 3 min read How to make a Disable Buttons using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be making a Disable Button using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="stylesheet 1 min read How to Disable Submit Button on Form Submit in JavaScript ? Forms are a crucial part of web development as they allow users to submit data to a server. However, sometimes we want to customize the behavior of HTML forms and prevent the default behavior from occurring. This allows you to create a more interactive and user-friendly web application. In this arti 3 min read How to prevent duplicate submission in a form using jQuery? Preventing duplicate submission in a form using jQuery involves implementing measures to ensure that the form is only submitted once, regardless of how many times the user interacts with the submit button. To prevent duplicate form submissions in web applications using jQuery we can use various meth 4 min read How to Disable a Button in jQuery UI ? To disable a button in jQuery UI, we will be using disable() method which is discussed below: jQuery UI disable() method is used to completely disable the button. It returns the button element completely to its initial state. Syntax: $(".selector").button("disable") Parameters: This method does not 2 min read How to exclude HTML form radio button values from being submitted using jQuery ? Given an HTML form with form elements including some radio button values, the task is to exclude these values from being submitted using jQuery. There is one main approach that can be followed.Approach: Use this property and submit(), find(), and prop() methods in jQuery. We apply the submit() metho 3 min read Like