4.11 form submission processing

We could attach a click listener directly to the Add Expense button, but that is not the best approach. Browsers already have built-in behaviour for HTML forms: pressing Enter or clicking a submit button triggers the form's submit event. We want to react to that event and run our own function every time the form is submitted.

On the <form> element we therefore add an onSubmit attribute pointing to a new function called submitHandler. Like every other handler in React, it receives the synthetic event object. The first thing we do inside is call event.preventDefault() to stop the browser from reloading the page — that is the built-in behaviour of HTML forms we want to override. 

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

  const expenseData = {
    title: enteredTitle,
    amount: enteredAmount,
    date: new Date(enteredDate),
  };

  console.log(expenseData);
};

Building the expenseData object

  • title reads from enteredTitle.
  • amount reads from enteredAmount.
  • date wraps enteredDate into a JavaScript Date with new Date(enteredDate).

The property names are entirely up to us because this is our own object. To verify everything works, we log expenseData to the console at the end of the handler. Go back to your browser, fill in the three fields and submit the form: you should see the new object printed in the developer console with the values you typed. See you in the next lesson.

Summary

This lesson covers form submission handling in React using the onSubmit event listener on the form element itself. You learn to prevent the browser's default form submission behavior with event.preventDefault(), which allows you to handle form data entirely in JavaScript. The example demonstrates collecting form input values (title, amount, date) from React state and combining them into a structured expense data object, then logging it to the console for verification.

Key points

  • Use the onSubmit event handler on the form element rather than click listeners on buttons to capture standard form submissions
  • Call event.preventDefault() to prevent the browser from reloading the page and sending form data to a server
  • Collect form input values from React state that you've been managing through onChange handlers
  • Create a structured data object that combines multiple form fields into a single JavaScript object
  • The preventDefault() method is attached to the event object and gives you full control over form behavior
  • Verify collected form data using console.log to ensure all fields are properly captured

FAQ

Why is onSubmit on the form element better than a click handler on the submit button?

The onSubmit event is triggered by any form submission method (pressing Enter, clicking the button, etc.), making it the standard approach for handling form submissions. This provides better control and follows web best practices compared to listening for clicks.

What does event.preventDefault() do and why is it important?

It prevents the browser's default form submission behavior, which would normally reload the page and send data to a server. This allows you to handle all form data processing yourself in JavaScript instead of relying on the browser's default behavior.

How do you consolidate data from multiple form inputs into a single object?

Store each input value in separate state variables through onChange handlers. When the form is submitted, combine all these state values into one object (like the expense object with title, amount, and date properties) that represents your complete form data.