Question 293681 in Html Question posted in
Some basic documentation can be found here.

Html – preventDefault not working on submit button

I have this simple form that does a post, but when i press submit on the button (has to be outside the form), the page refreshes even if i have set event.preventDefault() on the submit event. I want to just stay on the page and clear the input fields instead.
I thought maybe the DOMContentLoaded event was the problem but it dont work nomatter if put the code inside DOMContentLoaded listener.

document.addEventListener("DOMContentLoaded", () => {
  const confirm_btn = document.querySelector("#confirm");
  confirm_btn.addEventListener("submit", (event) => {
    event.preventDefault();
    // event.stopImmediatePropagation();
    // event.stopPropagation();
    const email = document.querySelector("#email");
    const first_name = document.querySelector("#first_name");

    // Example: Accessing values
    console.log("Email:", email.value);
    console.log("First Name:", first_name.value);
  });
});
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Single item</title>
    <script type="module" src="script.js"></script>
  </head>
  <body>
    <!-- imported header header.html -->
    <header id="header"></header>
    <main>
        <section class="step">
          <form id="address_form" method="post">
            <fieldset>
              <div class="input">
                <label for="email">Email</label>
                <input type="email" name="email" id="email" required />
              </div>
              <div class="input">
                <label for="first_name">First name</label>
                <input name="first_name" id="first_name" type="text" required />
              </div>
            </fieldset>
          </form>
        </section>

        <div class="button">
          <button type="submit" id="confirm" form="address_form">Confirm address</button>

    </main>
  </body>
</html>
Tags:

3

Answers


  1. 0

    How about this?
    I tried handling the form tag own submit event

    document.addEventListener("DOMContentLoaded", () => {
    const address_form = document.querySelector("#address_form"); // >> Change Here!!
    address_form.addEventListener("submit", (event) => {
      event.preventDefault();
      // event.stopImmediatePropagation();
      // event.stopPropagation();
      const email = document.querySelector("#email");
      const first_name = document.querySelector("#first_name");

      // Example: Accessing values
      console.log("Email:", email.value);
      console.log("First Name:", first_name.value);
    });
  });
    Login or Signup to reply.
  2. 0

    If you want it to just clear your form fields, you’ll have to change type="submit" to type="button"

    Login or Signup to reply.
  3. 0

    To prevent the refresh just add a onsubmit event condition to your form like this…

    <form id="address_form" method="post" onsubmit="return false;">

    To also set the form fields to default values, extend it to this…

    <form id="address_form" method="post" onsubmit="this.reset(); return false;">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search