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>>Solution :
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);
});
});