i have type button in form. and i am trying to call function onclick event but it wont work. there are lot of questions like this but none of them worked for me. my code looks like this
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>when i simply comment out form tags it starts working so issue must be there.
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>Please use a different name than reset() because it is a reserved keyword for resetting forms.
Since you're not calling event.preventDefault() unless the passwords don't match, as soon as the user clicks submit, they're going to be redirected off the page and the form is going to be sent to ../index.ejs. When the <form> tag isn't there, submit buttons don't redirect anywhere when clicked.
To keep the <form> tag, call event.preventDefault() no matter what. If you want to still submit the form data in the background, you can do so via fetch(), for example:
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>You also are using onClick="reset()" on the reset button. You should use onclick="reset()", or better yet, add an event listener in your JavaScript:
document.getElementById("reset").addEventListener("click", reset);