dark

Prevent Form Submission on Pressing Enter with JavaScript

How to Prevent Form Submission on Pressing Enter with JavaScript

Have you ever filled out a form and accidentally hit the Enter key, only to realize that the form has been submitted prematurely? This can be frustrating for both the user and the developer. Luckily, JavaScript provides a simple solution to prevent form submission on pressing Enter.

Step 1: Add an Event Listener to the Form

The first step is to add an event listener to the form. This will allow us to capture the user’s keystrokes and prevent the form from being submitted on Enter.

<form id="myForm">
  <!-- form fields here -->
</form>

<script>
  const form = document.getElementById('myForm');
  form.addEventListener('keypress', function(e) {
    if (e.keyCode === 13) {
      e.preventDefault();
    }
  });
</script>

In this code snippet, we first select the form element using its ID. We then add an event listener to the form, listening for the ‘keypress’ event. Inside the event listener, we check if the key code of the pressed key is equal to 13, which is the key code for Enter. If it is, we prevent the default behavior of the form submission using the e.preventDefault() method.

Step 2: Test the Form

Now that we have added the event listener, we can test the form to see if it works as expected. Try filling out the form and pressing Enter. You should see that the form is not submitted and the cursor remains in the same input field.

Step 3: Add a Submit Button

While preventing form submission on Enter is useful, it is still important to provide a way for users to submit the form. We can do this by adding a submit button to the form.

<form id="myForm">
  <!-- form fields here -->
  <button type="submit">Submit</button>
</form>

<script>
  const form = document.getElementById('myForm');
  form.addEventListener('keypress', function(e) {
    if (e.keyCode === 13) {
      e.preventDefault();
    }
  });
</script>

In this code snippet, we have added a submit button to the form. This button will allow users to submit the form when they are ready. We have also kept the event listener that we added earlier to prevent form submission on Enter.

Step 4: Test the Form Again

Now that we have added a submit button, we can test the form again to see if it works as expected. Try filling out the form and pressing Enter. You should see that the form is not submitted and the cursor remains in the same input field. Now try clicking the submit button. You should see that the form is submitted and the data is sent to the server.

CodePen Example:

See the Pen Prevent Form Submission on Pressing Enter with JavaScript by Alex Ivanovs (@stackdiary) on CodePen.

HTML:

<html>
  <head>
    <title>Prevent Form Submission on Enter</title>
  </head>
  <body>
    <form id="myForm">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name"><br><br>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email"><br><br>
      <button type="submit">Submit</button>
    </form>

    <script>
      const form = document.getElementById('myForm');
      form.addEventListener('keypress', function(e) {
        if (e.keyCode === 13) {
          e.preventDefault();
        }
      });
    </script>
  </body>
</html>

CSS:

label {
  display: block;
  margin-bottom: 10px;
}

input[type="text"], input[type="email"] {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

button[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

JavaScript:

const form = document.getElementById('myForm');
form.addEventListener('keypress', function(e) {
  if (e.keyCode === 13) {
    e.preventDefault();
  }
});

Preventing form submission on Enter is a useful technique that can help improve the user experience of your web forms. By following the steps outlined in this tutorial, you can easily add this functionality to your forms using JavaScript.

Related tutorials