React Tutorial- How To Get Bootstrap Form Values On Submit In React Js App

How To Get Bootstrap Form Values On Submit In React Js App

React Js Get Bootstrap Form Values On Submit. This React example will show how to get bootstrap form values on submit in a React js app.

This will be proved quite beneficial when we want to get form data or value on form submit in React js app. See below the step by step implementation of the same:

How To Get Form Values On Submit In React Js

Step 1- Create React App

Step 2- Set Up Bootstrap 4

Step 3- Create Form Component

Step 4- Add Component In App.js

 

Step 1- Create React App

In this step, we will open our terminal and execute the following command on our terminal to create a new React app:

npx create-react-app react-axios-tutorial

 

Now, after we have downloaded the new react app, we will have to execute the below command on our terminal:

npm start

 

Step 2- Set Up Bootstrap 4

Further, we have to install the Bootstrap 4 library into our React app by executing the following command:

npm install bootstrap --save

 

Here, we open the src/App.js file and add the bootstrap.min.css 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, we will visit the src directory of our React js app and create a form component named SimpleForm.js in which we have to add the below-given code:

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- Add Component In App.js

Here, we will be adding the SimpleForm.js file in the src/App.js file:

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;

Summary

React get form values on submit, we have seen how to get bootstrap form values on submitting in React js app.

 

Thanks