Open In App

React onSubmit Event

Last Updated : 29 Nov, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

React onSubmit is an event handler that triggers when a form is submitted. It is one of the form events that sends the input data to the handleSubmit function to utilize that information.

It is similar to the HTML DOM onsubmit event but uses the camelCase convention in React.

Syntax:

<form onSubmit={handleSubmit} >
<input type="text">
</form>

Parameter:

  • handleSubmit: It is a function call that includes the code to be executed with the form input when an event triggers

Return type:

  • event: It is an event object containing information about the event like target element and values

Example 1: This example demonstrates the use of the onSubmit event handler to update the states in React.

Javascript




// Filename - App.js
  
import React, { useState } from "react";
function App() {
    const [value, setValue] = useState("");
    const [result, setResult] = useState("");
    function handleSubmit(e) {
        e.preventDefault();
        setResult(
            "Form has been submitted with with Input: " +
                value
        );
    }
  
    function handleChange(e) {
        setValue(e.target.value);
        setResult("");
    }
    return (
        <div
            style={{ textAlign: "center", margin: "auto" }}
        >
            <h1 style={{ color: "Green" }}>
                GeeksforGeeks
            </h1>
            <h3>
                Exemple for React onSubmit Event Handler
            </h3>
            <form onSubmit={handleSubmit}>
                <label>Add input here: </label>
                <input
                    value={value}
                    onInput={handleChange}
                    required
                />
                <br />
                <br />
                <button type="submit">Submit</button>
            </form>
            <br />
            <div>
                <h4>{result}</h4>
            </div>
        </div>
    );
}
  
export default App;


Output:
Peek-2023-11-28-16-29

Example 2: This example demonstrate the use of the onSubmit event handler in select input.

Javascript




// Filename - App.js
  
import React, { useState } from "react";
function App() {
    const [value, setValue] = useState("");
    const [result, setResult] = useState("");
    function handleSubmit(e) {
        e.preventDefault();
        setResult(
            "Form has been submitted with with Input: " +
                value
        );
    }
  
    function handleChange(e) {
        setValue(e.target.value);
        setResult("");
    }
    return (
        <div
            style={{ textAlign: "center", margin: "auto" }}
        >
            <h1 style={{ color: "Green" }}>
                GeeksforGeeks
            </h1>
            <h3>
                Exemple for React onSubmit Event Handler
            </h3>
            <form onSubmit={handleSubmit}>
                <label>Select Input: </label>
                <select
                    value={value}
                    onChange={handleChange}
                >
                    <option value={"HTML"}>HTML</option>
                    <option value={"CSS"}>CSS</option>
                    <option value={"JavaScript"}>
                        JavaScript
                    </option>
                </select>
                <br />
                <br />
                <button type="submit">Submit</button>
            </form>
            <br />
            <div>
                <h4>{result}</h4>
            </div>
        </div>
    );
}
  
export default App;


Output:

Peek-2023-11-28-16-49



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads