Submit a form using the Enter key in React.js

avatar

Borislav Hadzhiev

Mon Apr 18 20222 min read

banner

Photo by Dan Gold

Submit a form using the Enter key in React.js #

To submit a form using the Enter key in React:

  1. Add a button element with type set to submit.
  2. Add an onSubmit prop that points to a submit handler function.
  3. Every time the user presses Enter, the handle submit function will be invoked.
App.js
import {useState} from 'react'; const App = () => { const [first, setFirst] = useState(''); const [last, setLast] = useState(''); const handleSubmit = event => { event.preventDefault(); console.log('form submitted ✅'); }; return ( <div> <form onSubmit={handleSubmit}> <input type="text" id="first" name="first" value={first} onChange={event => setFirst(event.target.value)} autoComplete="off" /> <input type="text" id="last" name="last" value={last} onChange={event => setLast(event.target.value)} autoComplete="off" /> <button type="submit">Submit</button> </form> </div> ); }; export default App;

submit form enter key

Notice that the button element has a type prop set to submit. This is the most important detail in the code snippet.

The second thing we have to do is set the onSubmit prop on the form element.

Now every time the user presses their Enter key, the form is submitted and the handleSubmit function is invoked.

We used the event.preventDefault() method in the handleSubmit function to prevent the page from refreshing when the form is submitted.

If you need to clear the values of the form elements after the form has been submitted, set them to empty strings or their respective initial values.

App.js
const handleSubmit = event => { event.preventDefault(); console.log('form submitted ✅'); // 👇️ clearing input values after submit setFirst(''); setLast(''); };

Alternatively, you can add an event listener that listens for the Enter key.

To submit a form using the Enter key in React:

  1. Add a keydown event listener to the document element.
  2. If the user pressed the Enter key, call your submit handler function.
App.js
import {useEffect, useState} from 'react'; const App = () => { const [first, setFirst] = useState(''); const [last, setLast] = useState(''); const handleSubmit = () => { console.log('form submitted ✅'); }; useEffect(() => { const keyDownHandler = event => { console.log('User pressed: ', event.key); if (event.key === 'Enter') { event.preventDefault(); // 👇️ call submit function here handleSubmit(); } }; document.addEventListener('keydown', keyDownHandler); return () => { document.removeEventListener('keydown', keyDownHandler); }; }, []); return ( <div> <form> <input type="text" id="first" name="first" value={first} onChange={event => setFirst(event.target.value)} autoComplete="off" /> <input type="text" id="last" name="last" value={last} onChange={event => setLast(event.target.value)} autoComplete="off" /> <button>Submit</button> </form> </div> ); }; export default App;

We used the useEffect hook to add a keydown event listener to the document element.

Now every time the user presses a key, the keyDownHandler function is invoked.

enter key listener

In the function, we simply check if the user pressed the Enter key and if they did, we call the handleSubmit function.

The function we returned from the useEffect hook is used to clean up the event listener when the component unmounts.

This solution works even when the user has not focused any of the input fields. Any element on the page can have focus and when the user presses the Enter key, the form is submitted.

Use the search field on my Home Page to filter through my more than 1,000 articles.