The onSubmit event in React is an event handler that is triggered when a form is submitted. It allows you to handle form submissions and allows you to control what happens when a user submits a form, such as form validation, preventing the default submission behaviour, and executing custom logic like sending data to an API or processing the form data.

Syntax

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

• onSubmit = {handleSubmit}: The event handler function handleSubmit is called when the form is submitted.
• handleSubmit: A custom function where you can define actions (like validation or API calls) when the form is submitted.

When Does the onSubmit Event Get Triggered?

The onSubmit event gets triggered when

• A user clicks the submit button inside a form.
• A user presses the Enter key while focused on an input field within the form.
• The form submission event is programmatically dispatched using JavaScript.

Note: When a user submits a form, React triggers the event handler and gives you access to the form’s data via the event object.

Now let's understand this with the help of an example:

// 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

In this example

• The app uses React state (value and result) to manage form input and display the result.
• handleSubmit updates result with the input value when the form is submitted.
• handleChange updates value and clears result whenever the input changes.
• The form includes a labeled input field and a submit button.

Accessing the Event Object

React provides access to the event object within the onSubmit handler. This allows you to access form data, prevent default submission, and handle other event-related tasks efficiently.

Now, let us understand with the help of the example:

import React, { useState } from "react";

function AccessEvent() {
    const [value, setValue] = useState("");
    const handleSubmit = (event) => {
        console.log("Event object:", event);
        alert(`Form submitted with value: ${value}`);
    };

    const handleChange = (event) => {
        setValue(event.target.value);
    };

    return (
        <div>
            <form onSubmit={handleSubmit}>
                <label>
                    Enter Text:
                    <input type="text" value={value} onChange={handleChange} />
                </label>
                <button type="submit">Submit</button>
            </form>
        </div>
    );
}

export default AccessEvent;

Output

In this example

• State Management: value stores the input text.
• handleSubmit: On form submission, it logs the event object and shows an alert with the input value.
• handleChange: Updates the value state as the user types in the input field.

Preventing Default Form Submission

In React, when a form is submitted, the default behavior is for the page to reload, which is typically undesirable for single-page applications (SPA). To prevent this, we use the event.preventDefault() method. This allows us to handle the form submission programmatically without reloading the page.

Now, let us understand with the help of the example:

import React, { useState } from "react";

function PreventForm() {
    const [value, setValue] = useState("");
    const [result, setResult] = useState("");

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

        if (!value.trim()) {
            alert("Input cannot be empty!");
        } else {
            setResult(value);
            alert("Form submitted successfully!");
        }
    };

    const handleChange = (event) => {
        setValue(event.target.value);
        setResult(""); 
    };

    return (
        <div>
            <form onSubmit={handleSubmit}>
                <label>
                    Enter Text:
                    <input type="text" value={value} onChange={handleChange} />
                </label>
                <button type="submit">Submit</button>
            </form>
            <p>Result: {result}</p>
        </div>
    );
}

export default PreventForm;

Output

In this example

• State Management: value stores the input text, and result stores the result after form submission.
• handleSubmit: Prevents the default form submission (page reload) using event.preventDefault(). If the input is empty, it shows an alert; otherwise, it sets result with the input value and displays a success message.
• handleChange: Updates the value state as the user types and clears the result when the input changes.

Key Features of onSubmit

• Handles Form Submissions: It captures form submission events, triggered by a user pressing a submit button or pressing Enter in a form field.
• Prevents Default Behavior: The default form submission can be prevented, allowing you to handle the submission programmatically.
• Works with All Form Elements: Can be used to handle submissions from any form element, including <input>, <textarea>, <select>, etc.
• Flexible Callback: You can perform custom actions like validation, API calls, or state updates within the onSubmit event handler.

Use Cases for onSubmit

• Form Validation: Check if all required fields are filled or if the data entered is valid before submitting.
• Submitting Data: Send form data to a server or API when the form is submitted.
• Prevent Page Reload: Prevent the default form behavior (page reload) and handle form submission with JavaScript.
• Displaying Confirmation: Show a confirmation message or update the UI after a successful form submission.
• Resetting Fields: Clear form fields or reset the form after submission.

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

Conclusion

The onSubmit event in React is a powerful tool for managing form submissions. It allows developers to control form behaviors, such as validating input, preventing default page reloads, and performing actions like API calls. By using onSubmit, you can create responsive and interactive forms, enhancing the user experience in React applications.