Comparing two fields in a form in Javascript - Not working

Question

Can anyone tell me what I am doing wrong? my comparePasswords() is not working...

     <script>

      function comparePasswords()
      {
       if (post-form.password.value != post-form.password2.value)
       {
        $('passwordShow').innerHTML = '';
       }
       else
       {
        $('passwordShow').innerHTML = 'Passwords do not match';
       }
      }
     </script>


<form id="post-form" action="signup.php" method="post" >

<input type="password" id="password" name="password" onkeyup="testPassword(this.value);" maxlength="50" size="25" tabindex="102" value="">

<input type="password" id="password2" name="password2" onkeyup="comparePasswords();" maxlength="50" size="25" tabindex="104" value="">

</form>

Answer 1

The test in your if is backwards. The first branch is testing if the two passwords are NOT equal to each other.

Answer 2

you need to use

document.getElementById('password').value

and

document.getElementById('password2').value

Also, your logic is wrong. The first conditional block will fire if the passwords do not match.

EDIT

seems you are using jQuery, so simply use

$('#password').val()

to get the field's value.

You should also set the innerHTML using jQuery (may as well) with the html() method

Answer 3

The problem is with how you're accessing the form object.

post-form.password

To the javascript engine, this is the same as this:

post - (form.password)

Also, you'd have to give your form a name attribute (not just an id) to access it that way. If you wanted to access it by name, you'd use something like this:

document['post-form'].password

Or by id:

document.getElementById("post-form");