Prevent form submission on Enter press in React

avatar

Borislav Hadzhiev

Last updated: May 2, 2022

banner

Photo from Unsplash

Prevent form submission on Enter press in React #

To prevent form submission when the Enter key is pressed in React, use the preventDefault() method on the event object, e.g. event.preventDefault(). The preventDefault method prevents the browser from refreshing the page when the form is submitted.

App.js
import {useState} from 'react'; const App = () => { const [firstName, setFirstName] = useState(''); const [lastName, setLastName] = useState(''); const handleSubmit = event => { console.log('handleSubmit ran'); event.preventDefault(); // 👈️ prevent page refresh // 👇️ access input values here console.log('firstName 👉️', firstName); console.log('lastName 👉️', lastName); // 👇️ clear all input values in the form setFirstName(''); setLastName(''); }; return ( <div> <form onSubmit={handleSubmit}> <input id="first_name" name="first_name" type="text" onChange={event => setFirstName(event.target.value)} value={firstName} /> <input id="last_name" name="last_name" type="text" value={lastName} onChange={event => setLastName(event.target.value)} /> <button type="submit">Submit form</button> </form> </div> ); }; export default App;

We used the preventDefault method to prevent the browser from refreshing the page when the form is submitted.

App.js
const handleSubmit = event => { console.log('handleSubmit ran'); event.preventDefault(); // 👈️ prevent page refresh // 👇️ access input values here console.log('firstName 👉️', firstName); console.log('lastName 👉️', lastName); // 👇️ clear all input values in the form setFirstName(''); setLastName(''); };

When the Enter key is pressed with focus on a form with a submit handler, the default browser behavior is to refresh the page.

If you don't want to submit the form at all when the Enter key is pressed, you should remove the onSubmit prop from the form, and add an onClick handler to the button.

App.js
import {useState} from 'react'; const App = () => { const [firstName, setFirstName] = useState(''); const [lastName, setLastName] = useState(''); const handleClick = event => { console.log('handleClick ran'); event.preventDefault(); // 👈️ prevent page refresh // 👇️ access input values here console.log('firstName 👉️', firstName); console.log('lastName 👉️', lastName); // 👇️ clear all input values in the form setFirstName(''); setLastName(''); }; return ( <div> <form> <input id="first_name" name="first_name" type="text" onChange={event => setFirstName(event.target.value)} value={firstName} /> <input id="last_name" name="last_name" type="text" value={lastName} onChange={event => setLastName(event.target.value)} /> <button type="button" onClick={handleClick}> Submit form </button> </form> </div> ); }; export default App;

The form from the example above will only get submitted when the button is clicked.

The button element has a type of button instead of submit, so pressing the Enter key will not submit the form.

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.