Submit a form using the Enter key in React.js

avatar
Borislav Hadzhiev

Last updated: Apr 18, 2022
2 min

banner

# 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 sample.

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 turn off autocomplete on an input field, check out the following article.

# Clearing the values of the form elements

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.

# Submit a form with the Enter key using an event listener

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 hasn't 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.

I've also written a tutorial on how to detect when the focus is lost.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev