How to disable form submit on enter button using jQuery ?

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

                
<!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
      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>                    

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.