How do you prevent a form from submitting (to handle it with JavaScript)?

Call event.preventDefault() inside the form's submit handler to stop the default page reload so you can handle the data in JavaScript.

const form = document.querySelector("form");

form.addEventListener("submit", (event) => {
    // Stop page reload
    event.preventDefault();

    // Handle form data with JavaScript
    const data = new FormData(form);
    console.log(data.get("username"));

    // Send via fetch, validate, etc.
});

Common use cases:

• Client-side validation before submit
• AJAX form submission
• Single Page Application (SPA) navigation

Note: Without preventDefault(), the form submits normally and the page reloads/navigates.