Tengo un botón de tipo en el formulario. y estoy tratando de llamar al evento onclick de la función pero no funcionará. hay muchas preguntas como esta, pero ninguna de ellas funcionó para mí. mi código se ve así
function reg(event) { if(document.getElementById("repass").value !== document.getElementById("pass").value){ event.preventDefault(); alert("Passwords do not match"); } } function reset() { alert("done"); } <form action="../index.ejs" method="post" > <div class="registration-popup" id="regpopup"> <div class="content"> <h1 id="h1">Create new account</h1> <div class="input"> <input type="text" placeholder="First Name" class="inp" id="name"/> </div> <div class="input"> <input type="text" placeholder="Second Name" class="inp" id="secname"/> </div> <div class="input"> <input type="text" placeholder="Username" class="inp" id="username" /> </div> <div class="input"> <input type="tel" placeholder="Phone Number" class="inp" id="phone" /> </div> <div class="input"> <input type="text" placeholder="Address" class="inp" id="addres" /> </div> <div class="input"> <input type="password" placeholder="Password" class="inp" id="pass" /> </div> <div class="input"> <input type="password" placeholder="Repeat password" class="inp" id="repass" /> </div> <input type="submit" id="register" value="Register" onclick="reg(event)" > <input type="button" id="reset" value="Reset" onClick="reset()" > </div> </div> </form>cuando simplemente comento las etiquetas de formulario, comienza a funcionar, por lo que el problema debe estar allí.
function reg(event) { if(document.getElementById("repass").value !== document.getElementById("pass").value){ event.preventDefault(); alert("Passwords do not match"); } } function Reset() { alert("done"); } <form action="../index.ejs" method="post" > <div class="registration-popup" id="regpopup"> <div class="content"> <h1 id="h1">Create new account</h1> <div class="input"> <input type="text" placeholder="First Name" class="inp" id="name"/> </div> <div class="input"> <input type="text" placeholder="Second Name" class="inp" id="secname"/> </div> <div class="input"> <input type="text" placeholder="Username" class="inp" id="username" /> </div> <div class="input"> <input type="tel" placeholder="Phone Number" class="inp" id="phone" /> </div> <div class="input"> <input type="text" placeholder="Address" class="inp" id="addres" /> </div> <div class="input"> <input type="password" placeholder="Password" class="inp" id="pass" /> </div> <div class="input"> <input type="password" placeholder="Repeat password" class="inp" id="repass" /> </div> <input type="submit" id="register" value="Register" onclick="reg(event)" > <input type="button" id="reset" value="Reset" onClick="Reset()" > </div> </div> </form> Utilice un nombre diferente a reset() porque es una palabra clave reservada para restablecer formularios.
Como no está llamando a event.preventDefault() a menos que las contraseñas no coincidan, tan pronto como el usuario haga clic en enviar, será redirigido fuera de la página y el formulario se enviará a ../index.ejs . Cuando la etiqueta <form> no está allí, los botones de submit no redirigen a ninguna parte cuando se hace clic en ellos.
Para conservar la etiqueta <form> , llama a event.preventDefault() lo que pase. Si aún desea enviar los datos del formulario en segundo plano, puede hacerlo a través de fetch() , por ejemplo:
async function reg(event) { event.preventDefault(); if(document.getElementById("repass").value !== document.getElementById("pass").value) { alert("Passwords do not match"); return; } const formData = new FormData(); formData.append("name", document.getElementById("name").value); // The rest of your form fields... const response = await fetch("../index.ejs", { method: "POST", body: formData }); } function Reset() { alert("done"); } <form action="../index.ejs" method="post" > <div class="registration-popup" id="regpopup"> <div class="content"> <h1 id="h1">Create new account</h1> <div class="input"> <input type="text" placeholder="First Name" class="inp" id="name"/> </div> <div class="input"> <input type="text" placeholder="Second Name" class="inp" id="secname"/> </div> <div class="input"> <input type="text" placeholder="Username" class="inp" id="username" /> </div> <div class="input"> <input type="tel" placeholder="Phone Number" class="inp" id="phone" /> </div> <div class="input"> <input type="text" placeholder="Address" class="inp" id="addres" /> </div> <div class="input"> <input type="password" placeholder="Password" class="inp" id="pass" /> </div> <div class="input"> <input type="password" placeholder="Repeat password" class="inp" id="repass" /> </div> <input type="submit" id="register" value="Register" onclick="reg(event)" > <input type="button" id="reset" value="Reset" onClick="reset()" > </div> </div> </form> También está utilizando onClick="reset()" en el botón de reinicio. Debe usar onclick="reset()" , o mejor aún, agregue un detector de eventos en su JavaScript:
document.getElementById("reset").addEventListener("click", reset);