Javascript function not modifying html

Question

I have a problem with a Javascript function. It is supposed to check if two input boxes in a form have the same value, using an if statement.

HTML:

<form action="confirm_account.php" method="post" id="form" onsubmit="checkpassword()">

<p style="font-family:latine;">Password: <input type="password" name="password" id="password" style="font-family:latine;" required>
</p>
<br><br>
<p style="font-family:latine;">Re-enter Password: <input type="password" name="password-reenter" id="password-reenter" style="font-family:latine;" required> </p>
<span id="password-warning" style="color:red; font-weight:bold;"></span>

Javascript:

var password = document.getElementById("password").value;
var password2 = document.getElementById("password-reenter").value;
function checkpassword(){
   if('password' == 'password2'){
       document.getElementById("form").action = "confirm_account.php";
       document.getElementById("password-warning").innerHTML = "";
}
  else{
    document.getElementById("password-warning").innerHTML = "The passwords do not match, please re-enter the password.";
    document.getElementById("form").onsubmit = "return false";
}
};

The warning message shows up, but the onsubmit is not modified.

Answer 1

Try this, it should work:

 function checkpassword() { var password = document.getElementById("password").value; var password2 = document.getElementById("password-reenter").value; if (password === password2) { document.getElementById("form").action = "confirm_account.php"; document.getElementById("password-warning").innerHTML = ""; document.getElementById("password-success").innerHTML = "The passwords match! Well done!"; } else { document.getElementById("password-warning").innerHTML = "The passwords do not match, please re-enter the password."; document.getElementById("password-success").innerHTML = ""; document.getElementById("password-reenter").focus(); return false; } } 

 <form action="#" method="post" id="form" onsubmit="return checkpassword()"> <p style="font-family:latine;">Password: <input type="password" name="password" id="password" style="font-family:latine;" required> </p> <br> <p style="font-family:latine;">Re-enter Password: <input type="password" name="password-reenter" id="password-reenter" style="font-family:latine;" required> </p> <p> <span id="password-success" style="color:green;"></span> <span id="password-warning" style="color:red; "></span> <input type="submit" name="btnSave" value="Try it"> </form> 

Answer 2

var password = document.getElementById("password").value;
var password2 = document.getElementById("password-reenter").value;

In your if condition, you're not checking password and password2 instead you are actually checking the strings.

It should be

 if(password === password2){

And onsubmit is an event and you can't assign string to it. As you're calling checkpassword from onsubmit of form. To prevent form submission just return false .

var password = document.getElementById("password").value;
var password2 = document.getElementById("password-reenter").value;
function checkpassword(){
   if(password === password2){
       document.getElementById("password-warning").innerHTML = "";
   }
  else{
    document.getElementById("password-warning").innerHTML = "The passwords do not match, please re-enter the password.";
    return false;
  }
};