button in form tag can not call js function-CodePudding

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

    <form action="../index.ejs" method="post" >
<div  id="regpopup">
  <div >   
    <h1 id="h1">Create new account</h1>
    <div >
      <input type="text" placeholder="First Name"   id="name"/>
    </div>
    <div >
      <input type="text" placeholder="Second Name"  id="secname"/>
    </div>
    <div >
      <input type="text" placeholder="Username"  id="username" />
    </div>
    <div >
        <input type="tel" placeholder="Phone Number"  id="phone" />
    </div>
    <div >
        <input type="text" placeholder="Address"  id="addres" />
    </div>
    <div >
      <input type="password" placeholder="Password"  id="pass" />
    </div>
    <div >
      <input type="password" placeholder="Repeat password"  id="repass" />
    </div>
    <input type="submit" id="register" value="Register" onclick="reg(event)" >
    <input type="button" id="reset" value="Reset" onClick="reset()" >
  </div>
</div>

<script>
function reg(event) {
  if(document.getElementById("repass").value !== document.getElementById("pass").value){
    event.preventDefault();
    alert("Passwords do not match");  
  }
} 


function reset() {
  alert("done");
}
  
</script>

when i simply comment out form tags it starts working so issue must be there.

CodePudding user response：

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  id="regpopup">
  <div >   
    <h1 id="h1">Create new account</h1>
    <div >
      <input type="text" placeholder="First Name"   id="name"/>
    </div>
    <div >
      <input type="text" placeholder="Second Name"  id="secname"/>
    </div>
    <div >
      <input type="text" placeholder="Username"  id="username" />
    </div>
    <div >
        <input type="tel" placeholder="Phone Number"  id="phone" />
    </div>
    <div >
        <input type="text" placeholder="Address"  id="addres" />
    </div>
    <div >
      <input type="password" placeholder="Password"  id="pass" />
    </div>
    <div >
      <input type="password" placeholder="Repeat password"  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.

CodePudding user response：

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  id="regpopup">
      <div >   
        <h1 id="h1">Create new account</h1>
        <div >
          <input type="text" placeholder="First Name"   id="name"/>
        </div>
        <div >
          <input type="text" placeholder="Second Name"  id="secname"/>
        </div>
        <div >
          <input type="text" placeholder="Username"  id="username" />
        </div>
        <div >
            <input type="tel" placeholder="Phone Number"  id="phone" />
        </div>
        <div >
            <input type="text" placeholder="Address"  id="addres" />
        </div>
        <div >
          <input type="password" placeholder="Password"  id="pass" />
        </div>
        <div >
          <input type="password" placeholder="Repeat password"  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);