React js get bootstrap form values on submit example; In this tutorial i will show you step by step on how to get bootstrap form values on submit in react app.
When a form is used on button click event. And want to get the value of the form on submit button. So in this tutorial I will create a simple form which will have few fields. I will use the onSubmit event to get the values of the form on submit in react app.
- Note: you should handle onSubmit on the form rather than the button click – this way you will also handle the user submitting the form by pressing enter.
- A <form> with a <button> or <input> with type=submit will get submitted when the user presses Enter in any of the form’s <input type=text> .
How to Get Form Values On Submit in React
- Step 1 – Create React App
- Step 2 – Install Bootstrap 4
- Step 3 – Create Form Component
- Step 4 – Import Form Component in App.js
Step 1 – Create React App
Open your terminal and execute the following command on your terminal to create a new react app:
npx create-react-app react-axios-tutorial
To run the React app, execute the following command on your terminal:
npm start
Check out your React app on this URL: localhost:3000
Step 2 – Install Bootstrap 4
Execute the following command to install boostrap 4 library into your react app:
npm install bootstrap --save
Add bootstrap.min.css file in src/App.js
file:
import React from 'react'; import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; function App() { return ( <div> <h2>How to Get Form Values On Submit in React JS</h2> </div> ); } export default App;
Step 3 – Create Form Component
In this step, visit src directory of your react js app and create form component named SimpleForm.js. And add the following code into it:
import React from 'react' class SimpleForm extends React.Component{ constructor(){ super(); this.state = { first_name:null, last_name:null, email:null, city:null, address:null, gender:null, hobbies:[] } this.handleInputChange = this.handleInputChange.bind(this); } handleInputChange(event) { const target = event.target; var value = target.value; const name = target.name; if(target.type === 'checkbox'){ if(target.checked){ this.state.hobbies[value] = value; }else{ this.state.hobbies.splice(value, 1); } }else{ this.setState({ [name]: value }); } } submit(){ console.warn(this.state) } render(){ return( <div> <div class="row"> <div class="col-md-6 offset-md-3"> <br /><br /> <h3>Register Form</h3><br /> <form> <div class="form-row"> <div class="form-group col-md-6"> <label>First Name :</label> <input type="text" class="form-control" name="first_name" onChange={this.handleInputChange} /> </div> <div class="form-group col-md-6"> <label>Last Name :</label> <input type="text" class="form-control" name="last_name" onChange={this.handleInputChange} /> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label>Email :</label> <input type="email" class="form-control" name="email" onChange={this.handleInputChange} /> </div> <div class="form-group col-md-6"> <label>City :</label> <select class="form-control" name="city" onChange={this.handleInputChange}> <option selected>Select City</option> <option value="1">city 1</option> <option value="2">city 2</option> <option value="3">city 3</option> </select> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label>Gender :</label><br /> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="gender" id="inlineRadiom" value="male" checked={this.state.gender === "male"} onChange={this.handleInputChange} /> <label class="form-check-label" for="inlineRadiom">Male</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="gender" id="inlineRadiof" value="female" checked={this.state.gender === "female"} onChange={this.handleInputChange} /> <label class="form-check-label" for="inlineRadiof">Female</label> </div> </div> <div class="form-group col-md-6"> <label>Hobbies :</label><br /> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" name="hobbies" id="inlineCheckboxh1" value="1" onChange={this.handleInputChange} /> <label class="form-check-label" for="inlineCheckboxh1">Reading</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" name="hobbies" id="inlineCheckboxh2" value="2" onChange={this.handleInputChange} /> <label class="form-check-label" for="inlineCheckboxh2">Developing</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" name="hobbies" id="inlineCheckboxh3" value="3" onChange={this.handleInputChange} /> <label class="form-check-label" for="inlineCheckboxh3">Desiging</label> </div> </div> </div> <div class="form-row"> <div class="form-group col-md-12"> <label>Address :</label> <textarea name="address" class="form-control" onChange={this.handleInputChange} /> </div> </div> <div class="form-row"> <div class="col-md-12 text-center"> <button type="submit" class="btn btn-primary" onClick={()=>this.submit()}>Submit</button> </div> </div> </form> </div> </div> </div> ) } } export default SimpleForm;
Step 4 – Import Form Component in App.js
Import component in app.js, So visi src/App.js
file and import as follow:
import React from 'react'; import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; import SimpleForm from './SimpleForm' function App() { return ( <div className="App"> <SimpleForm/> </div> ); } export default App;
Conclusion
React get form values on submit, you have learned how to get bootstrap form values on submitting in react js app.