Welcome folks today in this blog post we will looking on how to handle and submit forms on pressing enter key on the keyboard in browser using react.js. All the full source code of the application is shown below.
Get Started
In order to get started you need to create a new react.js project using the below command as shown below
npx create-react-app sampleapp
cd sampleapp
Now you will see the below directory structure of the react.js app as shown below
Now you need to copy paste the below code inside the App.js file as shown below
App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
import {useEffect, useState} from 'react'; const App = () => { const [first, setFirst] = useState(''); const [last, setLast] = useState(''); const [submitted,setSubmitted] = useState(false) 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; |
As you can see we have declared three state variables for the first and last name and also a boolean variable which holds the current submit status of the form. And then inside the html we have the different form fields which allows the user to enter the first and last name and then we have the button to submit the form. And also we have attached the onChange event handler to each of the input fields whenever the data is changed then we are getting the entered values.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
import {useEffect, useState} from 'react'; const App = () => { const [first, setFirst] = useState(''); const [last, setLast] = useState(''); const [submitted,setSubmitted] = useState(false) const handleSubmit = () => { console.log('form submitted '); setSubmitted(true) }; 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> {submitted && <h1>Form is Submitted</h1>} </div> ); }; export default App; |
As you can see we are using the useEffect hook to execute the code whenever the enter key is pressed by the user to submit the form. And inside that function we are using the event.preventDefault() method to prevent the auto submission of the form and then we are changing the value of the submitted to true. And then inside the html we are showing the status to form is submitted.
