How can I handle a form submission without the page reloading?

Listen for the form’s submit event and call event.preventDefault() in that handler. That cancels the browser’s default submission behavior, so your page code can take over instead. [S1] Use it only when your page is actually handling the submission; cancellation alone does not provide your submission logic. [S2]

For example, assuming the page has a form with id="contact-form" and an element with id="status", a minimal handler could be:

const form = document.querySelector("#contact-form");
const status = document.querySelector("#status");

form.addEventListener("submit", (event) => {
  event.preventDefault();
  status.textContent = "Form submitted in this page.";
});

This example only updates a message; it does not send form data. Replace that line with the page’s actual submission handling.

The form’s submit event is the event to handle when you want your code to respond to form submission. [S1] Attach the listener to the form itself, rather than relying on a click listener on one button. The example puts the submission logic in the form’s handler, where it can cancel the form’s default action when appropriate.

In the example, #contact-form is a placeholder selector: change it to match your form. If the selector does not find a form, the example will need to be adjusted to your page. Likewise, the status element is only there to demonstrate a visible response; you can replace it with the handling your page needs.

No. preventDefault() cancels an event’s default action when that event is cancelable; it does not provide your own submission logic. [S2] In this pattern, canceling the form’s default action prevents the browser from carrying out its usual submission behavior. [S1] The handler must then decide what to do with the values. The example only displays a message—it does not send values or validate them.

For an actual submission, replace the example status update with your application’s handling. Avoid calling preventDefault() if you intend to rely on the browser’s usual form submission; otherwise, you have canceled that default behavior. [S1][S2] The appropriate way to handle or validate values depends on your application.

Treat the selectors and status text as placeholders. Match the form selector to your page, decide what your page should do with submitted values, and check that the resulting behavior matches your intention. If you want the browser’s normal form submission, leave out the cancellation and handle the form in the usual way. [S1]

A quick checklist:

1. Confirm the selector matches the intended form.
2. Attach the listener to that form’s submit event.
3. Call preventDefault() only when page code will handle the submission.
4. Replace the example message with your actual handling.
5. Check that a submission produces the behavior you intend.

If the page should send data, this small example is not a complete sending implementation; add the submission handling your application requires.