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.

if('password' == 'password2') you're not checking password and password2, instead checking two strings :) — mohamedrias
– mohamedrias, Commented Mar 25, 2015 at 15:19
what happens if you try: document.getElementById("form").onsubmit = null; — jdu
– jdu, Commented Mar 25, 2015 at 15:21
replace document.getElementById("form").onsubmit = "return false"; with return false; — Igor
– Igor, Commented Mar 25, 2015 at 15:21

chiapa · Accepted Answer · 2015-03-25 17:14:31Z

2

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>

edited Mar 25, 2015 at 17:14

answered Mar 25, 2015 at 15:46

chiapa

4,41811 gold badges73 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

yaakov Over a year ago

I don't need the alerts, do I?

yaakov Over a year ago

okay, one last thing. How can I make the "reenter password" box receive focus if the passwords don't match?

chiapa Over a year ago

You can achieve it easily with the focus() method. Check my edited answer

mohamedrias · Accepted Answer · 2015-03-25 15:38:52Z

1

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;
  }
};

edited Mar 25, 2015 at 15:38

answered Mar 25, 2015 at 15:21

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

7 Comments

BlackBlaze Over a year ago

Better if you use ===

yaakov Over a year ago

@mohamedrias, I want the variables to be global variables.

mohamedrias Over a year ago

@yak613 Okay. But if you want to prevent the form from submission, just return false. You can't assign a string as event handler

yaakov Over a year ago

onsubmit is an attribute of the form, isn't it?

mohamedrias Over a year ago

@yak613 It's an event and you can bind it to form as an attribute

|

Collectives™ on Stack Overflow

Javascript function not modifying html

2 Answers 2

3 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest