How do I submit a form when the return key is pressed?

javascript

form-validation

javascript-functions

cross-browser-compatibility

byAlex Kataev·Feb 13, 2025

To submit a form upon pressing the return (or Enter) key, include an <input type="submit"> within the form. Many browsers automatically trigger form submission on Enter if there's a submit button in place. Here's a basic example:

<form action="/submit-path">
  <input type="text">
  <input type="submit" hidden>
</form>

With the type="submit" input kept hidden, the form gets submitted without visibly displaying a button.

JavaScript for additional control

Need more control or intention on handling extra functionalities such as form validation? You can extend the natural browser behaviour using JavaScript.

document.addEventListener("DOMContentLoaded", function() {
  // 💡 Always target specific form with its Id: General > Specific!
  var form = document.getElementById("myForm");
  form.addEventListener("keypress", function(e) {
    // 🙈 Enter's keyCode is 13, I googled it...twice!
    if (e.keyCode == 13) { 
      e.preventDefault(); // Avaoid default browser submission
      // 🕵️‍♀️ Double-checking if everything's okay!
      if (form.checkValidity()) {
        form.submit(); // Okay, you're good to go!
      }
    }
  });
});

<form id="myForm" action="/submit-path">
  <input type="text" required>
  <!-- Hidden button here, engaging stealth mode! -->
  <input type="submit" class="hidden-button" hidden>
</form>

And with .hidden-button, make sure it remains invisible in its power suit:

.hidden-button { 
  position: absolute;
  left: -9999px;
  visibility: hidden;
}

Cross-browser compatibility and accessibility

From ensuring cross-browser compatibility to maintaining user accessibility, web development these days require the code to be more adaptable and versatile. This means you can't really use style="display: none". It might sideline certain older browsers and potentially cause issues with screen readers.

Rather, using visibility: hidden or placing items offscreen (like above) can be more effective. Keyboard users also won't be trapped inside invisible elements with tabindex set to -1.

Catering for style preservation

At times, you'd want to go invisible on your button but still keep its relevance in the document. Styling the <button> as a div-like block element can solve the problem while retaining its functionality.

<button type="submit" class="button-like-div">Submit</button>

.button-like-div {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font-size: 1em;
  color: inherit;
}

Checklist for efficient submission

Form validation: Avoid incomplete or flawed submissions.
Handle form submission based on keyCode inside JavaScript functions.
Use pure HTML forms for users with JavaScript disabled.
Regularly follow HTML5 specifications and guidelines.

Managing edge cases

Autocomplete: Forms may be submitted upon autocomplete option selection in certain browsers. Plan accordingly!
Browser defaults: Understand and plan for different browser behaviours on the Enter key press within forms.
Progressive enhancement: Your core form functionality should work independent of JavaScript. Improve on that.