supporting submit on enter

2019-10-09

~3 min read

539 words

When asking users for their input, it’s often a pleasant user experience to allow them to submit the form by pressing “Enter”.

In fact, that’s the default behavior if using the <form> element:

<body>
  <div>
    <form>
      <div>
        <span id="empty"></span>
        <label for="first-name">Your Name</label>
        <input name="first-name" type="text" />
      </div>
      <button id="submitBtn">Click to see the magic!</button>
    </form>
  </div>
</body>
<script>
  function handleSubmit(e) {
    e.preventDefault()
    console.log(`clicked`)
    document.getElementById("empty").innerHTML = ‘filled!’
  }
  document.getElementById("submitBtn").addEventListener("click", handleSubmit);
</script>

With the above form, you could press enter in the first-name input or the button - in both cases, you’ll get to “filled!” Appear.

Unfortunately, breaking this default behavior is rather easy to do - particularly for the sake of design.

So, imagine instead that you have a <form> with its inputs and a button that lives outside of that form.

How do you allow the user the same ease of input?

Very similarly to how we added the event listener for click - except now we’re going to look for keyup and we’re going to be listening on the entire form.

<body>
  <div>
    <form id="awesome-form">
      <!-- ... no changes -—>
    </form>
  </div>
</body>
<script>
  // ... no changes
  document.getElementById("awesome-form").addEventListener("keyup", handleSubmit);
</script>

This works… too well.

There are two problems:

We’re firing handleClick for any keyup. We only want it to happen on Enter.
The form currently has no validation, so even if the form had errors, by pressing a key (or ‘Enter’ if the above is addressed), we’d try to submit.

For the former, we should add a condition to our handleSubmit to only fire if we press the Enter key ¹ , for example:

  function handleClick(e) {
    e.preventDefault()
    if (e.keyCode === 13 ) {
      console.log(`clicked`)
      document.getElementById("empty").innerHTML = ‘filled!’
    }
  }

Remember how I said I like React? This same thing in react would just be: ²

function handleClick(e) {
    e.preventDefault()
    if (e.key === ‘Enter ) {
      console.log(`clicked`)
      // do whatever you want here, but it probably won’t be getting a document by its ID.
    }
  }

And then you could pass this function as a prop to the keyUp value.

For the latter, it’s good practice to validate your form.

If validation is present, then it would be a matter of adding that as a condition to firing the function. E.g.,

  const valid = true // put in the conditions here
  function handleClick(e) {
    e.preventDefault()
    if (e.keyCode === 13 && valid) {
      console.log(`clicked`)
      document.getElementById("empty").innerHTML = ‘filled!’
    }
  }

For form management (including validation), I like Formik. It took me a few forms worth of practice to understand how the validation works, but once I did I realized how intuitive and pleasant it is.

Now, I can just check to make sure there are no errors in my form and if everything’s good, fire off my handle submit if the user presses the enter key.

Footnotes

¹ Each key has a code. Enter happens to be number 13 in Javascript. Javascript Char Codes (Key Codes) | Cambia Research
² Since v0.11, React supports event normalization. Instead of having to type in the key id, you can say event.key === ‘Enter’ or enter.key === ‘ArrowLeft’, etc. React v0.11 – React Blog

Hi there and thanks for reading! My name's Stephen. I live in Chicago with my wife, Kate, and dog, Finn. Want more? See about and get in touch!