How to trigger a button click on Enter with JavaScript

This is a basic form implementation with an input field and a submit button:

<form action="/some_page.php" method="post">
    <input type="text" name="title">
    <button class='submit' type="submit">Submit</button>
</form>

To send the data to the server, the user can either click on the Submit button or press ENTER. We can also use AJAX or Fetch instead of a form to achieve the same thing. In this case, we’ll have to rely on JavaScript. So with a slight modification to the above HTML markup:

<!-- with don't need the "action" and "method" attributes -->
<form>
    <!-- neither do we need the "name" attribute -->
    <input type="text" name="title">
    <!-- ...or the "type" submit attribute -->
    <button>Submit</button>
</form>

… and with the help of the fetch API, we can make a POST request to the server with is this script:


const form = document.querySelector('form');
const submitBtn = document.querySelector('button');

submitBtn.addEventListener('click', function (e) {
  // prevent form from sending a request
  e.preventDefault();
  fetch('https://some_url', {
    method: 'POST',
    body: JSON.stringify({
      title: 'foo'
    }),
    headers: {
      'Content-type': 'application/json; charset=UTF-8'
    }
  })
    // handle the response
    .then(response => response.json())
    .then(json => console.log(json));
});

Now, when we click on the submit button, the request will be made as intended. But, as with a regular form, the user also expects to send the request when the ENTER key is pressed which, unfortunately, is not the case with JavaScript. So how can we fix this? well, It’s actually easy with this code:

const input = document.querySelector('input');
const submitBtn = document.querySelector('button');

input.addEventListener("keypress", function(event) {
  e.preventDefault();
  // if the "Enter" key is pressed
  if (event.key === "Enter") {
    // trigger the click event on the button
    submitBtn.click();
  }
});

Finally, this is the complete JavaScript code:

const form = document.querySelector('form');
const input = document.querySelector('input');
const submitBtn = document.querySelector('button');

input.addEventListener("keypress", function(event) {
  e.preventDefault();
  // if the "Enter" key is pressed
  if (event.key === "Enter") {
    // trigger the click event on the button
    submitBtn.click();
  }
});

submitBtn.addEventListener('click', function (e) {
  // prevent form from sending a request
  e.preventDefault();
  fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    body: JSON.stringify({
      title: 'foo'
    }),
    headers: {
      'Content-type': 'application/json; charset=UTF-8'
    }
  })
    // handle the response
    .then(response => response.json())
    .then(json => console.log(json));
});

Conclusion:

In this post, I’ve shown you how to trigger a click event on a button when the ENTER key is pressed through a practical example.

Coding Triumph

Helpful code snippets & tutorials