How to Get Form Value on Submit in React JS

How to Get Form Value on Submit in React JS

In this tutorial, you will learn in detail how to get form values on submit using states in the react js applications.

React JS Get Form Value On Submit

Steps to get form values on submit:

Step 1 – Create React App

In this step, open your cmd and run the following command on your terminal to create a new react app:

npx create-react-app react-axios-tutorial

To run the React app, run the following command on your terminal:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Set up Bootstrap

In this step, run the following command to install bootstrap library into your react app:

npm install bootstrap --save

Set up 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

Go to src directory of your react js app, create a form component named SimpleForm.js, and use states to store form values:

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

In this step, you need to add SimpleForm.js file in 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;

Conclusion

That’s it, you have learned how to get bootstrap form values on submitting in react js app.

Recommended React JS Tutorials

AuthorAdmin

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *