React Input Form Submission Example (2024)

What is Reactjs?

React is a component-based library that breaks down the user interface into smaller, reusable components. In some circumstances, those components will need to communicate (give data to one another), and the best method to do so is to use props.

What is State in ReactJS?

The state is a built-in React object that holds data or information about the component. The state of a component can change depending upon the user actions on the components or with any system events.

In this article will show you how to create a form with input fields, validate and use the state of the input, and submit it. For styling Form, Button, and UI, we'll utilise the react-bootstrap library.

1. In the form will have 3 fields (Id, User Name, Role).
2. All fields are required to fill.
3. After submission will clear the form.

Project Structure

Reactjs Dependencies

Add below dependencies in package.json file.

{
    "name": "reactjs-input-form-submission",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@testing-library/jest-dom": "^5.14.1",
        "@testing-library/react": "^11.2.7",
        "@testing-library/user-event": "^12.8.3",
        "bootstrap": "^4.6.0",
        "react": "^17.0.2",
        "react-bootstrap": "^1.6.4",
        "react-dom": "^17.0.2",
        "react-scripts": "4.0.3",
        "web-vitals": "^1.1.2"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    }
}

Create Form

Create EmployeeForm.js under src/components.

1. We'll use a controlled technique called State to get the input values of fields.
2. Once the user types into the input field, the onChange handler updates the state with it's new input value through event.target.value.
3. When the Submit action event occurs, the browser sends a POST request for the entire page to the action defined URL, and if that URL is not available, it uses the current URL.
4. Prevent the browser default behaviour, we can call event.preventDefault() on onSubmit Form.
5. We will use react-bootstrap components for styling our form.

import React, { useState } from 'react';
import { Form, Button, Container, Alert } from 'react-bootstrap';


const EmployeeForm = () => {
  const [enteredId, setId] = useState('');
  const [enteredName, setName] = useState('');
  const [enteredRole, setRole] = useState('');


  const IdChangeHandler = (event) => {
    setId(event.target.value);
  };

  const nameChangeHandler = (event) => {
    setName(event.target.value);
  };

  const roleChangeHandler = (event) => {
    setRole(event.target.value);
  };


  const submitHandler = (event) => {
    event.preventDefault();

    //reset the values of input fields
        setId('');
        setName('');
        setRole('');

    return alert('Entered Values are: '+enteredId+','+ enteredName +','+enteredRole)


  };

    return(
      <Alert variant='primary'>
      <Container>
      <Form onSubmit={submitHandler}>
      <Form.Group  controlId="form.id">
            <Form.Label>Id</Form.Label>
            <Form.Control type="number" value={enteredId} onChange={IdChangeHandler}placeholder="Enter Id" required/>
        </Form.Group>
        <Form.Group controlId="form.Name">
            <Form.Label>User Name</Form.Label>
            <Form.Control type="text" value={enteredName} onChange={nameChangeHandler} placeholder="Enter User Name" required/>
        </Form.Group>
        <Form.Group  controlId="form.Role">
            <Form.Label>Role</Form.Label>
            <Form.Control type="text" value={enteredRole} onChange={roleChangeHandler} placeholder="Enter Role" required/>
        </Form.Group>
        <Button type='submit'>Add Employee</Button>
      </Form>
    </Container>
    </Alert>

    );
}
export default EmployeeForm;

App.js

In the App.js file, add the EmployeeForm component.

import React from 'react';
import "bootstrap/dist/css/bootstrap.min.css";
import EmployeeForm from './components/EmployeeForm';

function App() {

  return (
    <div><h2>TechGeekNext Input Form Example</h2>
    <div class="col">
    <EmployeeForm />
    </div>
    </div>
  );
}

export default App;

Test the Reactjs Form

npm install

npm start

By default application will open in browser at http://localhost:3000/ url.

If we submit the form without entering in all of the required fields, a validation warning will appear.

The provided values will be cleared from the form after successful submission, and a Success alert message will be displayed with the submitted data.