React Get Form Values On Submit Tutorial

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.

1. 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.
2. 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.

Recommended React Tutorials