How to get form data/value on submit in ReactJS

How to get form data/value on submit in ReactJS

React js get bootstrap form values on submit. This tutorial guide will explain to you in detail how to get bootstrap form values on submit in react js app.

Sometimes, you work in react js app and want to get form data or value on form submit in react js app. So, you can create a state object that holds all the form values and update it as the user interacts with the form. Then, on form submit, you can access the state object to get all the form values.

How to Get Form Value/data On Submit in React JS

Just follow the following steps and get bootstrap form values on submit in react js app.:

  • 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, 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 – Set up Bootstrap 4

In this step, 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;

Here is a breakdown of above given code:

  • This is a React component called SimpleForm that renders a registration form with several input fields.
  • The import React from 'react' statement imports the React library so that the code can use its functions and classes.
  • The constructor method initializes the component’s state by defining a set of properties with their initial values. In this case, the state object contains first_name, last_name, email, city, address, gender, and hobbies properties.
  • The handleInputChange method is used to handle changes in the form input fields. It is called every time a change event is triggered on any of the input fields. It retrieves the name and value of the input field that triggered the event and updates the corresponding property in the component’s state using the setState() method.
  • If the input field is a checkbox, the handleInputChange method handles it differently. If the checkbox is checked, it adds the value of the checkbox to the hobbies array in the component’s state. If it is unchecked, it removes the value of the checkbox from the hobbies array.
  • The submit method is called when the Submit button is clicked. It simply logs the current state of the component to the console.
  • The render method returns the form markup with all the input fields and their corresponding event handlers. When the form is submitted, the submit method is called via an anonymous arrow function. Finally, the export default SimpleForm statement exports the SimpleForm component so that it can be used in other parts of the code.

Step 4 – Add 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

React get form values on submit, 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 *