确认密码字段

Question

I am trying to confirm my password field before the users details are sent to the server. I have tried to implement this using jquery and php but I can't get it working. I know this should be fairly simple, but it is sending the details without confirming the password.

My code is as follows(I have removed some divs, to make it clear)

  <form onSubmit="return validate()" id="register" method="post" action="../script/sendUserDetails.php">
    <p style=" font-size:1.8em; color:black;">Ready</p>
    <p style=" font-size:1.4em; color:black;">Enter your details</p>

        <label for="fname">First Name:&nbsp;</label><br/>
        <input autofocus name="fname" type="text" id="fname" 
         class="textEntry" required placeholder="First Name"/><br />
        <label for="lname">Last Name:&nbsp;</label><br/>
        <input name="lname" type="text" id="lname" class="textEntry" required placeholder="Last Name"/><br />
           <label for="email">Email:&nbsp;</label><br/>
        <input name="email" type="email" id="emailR" class="textEntry" required placeholder="Email"/><br />

   <p style="font-size:1.8em; color:black;">Steady</p>
    <p style="font-size:1.4em; color:black;">And your address</p>
        <label for="address1">Address1:&nbsp;</label><br/>
        <input name="address1" type="text" id="address1" class="textEntry" required placeholder="Address"/><br />
        <label for="address2">Address2:&nbsp;</label><br/>
        <input name="address2" type="text" id="address2" class="textEntry" placeholder="Address" /><br />
        <label for="town">Town:&nbsp;</label><br/>
        <input name="town" type="text" id="town" class="textEntry" required placeholder="Town"/><br />
        <label for="postcode">Post Code:&nbsp;</label><br/>
        <input name="postcode" type="text" id="postcode" class="textEntry" required placeholder="Post Code"/>
        <br />
    <label for="phone">Phone:&nbsp;</label><br/>
        <input name="phone" placeholder="Phone" type="text" id="phone" class="textEntry" required/><br />

<p style="font-size:1.8em; color:black;">Go</p>
    <p style="font-size:1.4em; color:black; ">Now a password</p>

         <label for="password">Password:&nbsp;</label><br/>
        <input name="password" placeholder="Password" type="password" id="passwordR" class="passwordEntry" 
          required/><br />
         <label for="confirm_password">Confirm Password:&nbsp;</label><br/>
        <input name="confirm_password" placeholder="Password" type="password" id="confirm_password" class="passwordEntry" 
          required/><br />

        <p ><input class="button-link" type="submit" id="cu" value="Create Account"/></p>
       </form>  

My php code is;

<?php
 include("dbconnect.php");
 $fname=$_POST['fname'];
 $lname=$_POST['lname'];
 $address1=$_POST['address1'];
 $address2=$_POST['address2'];
 $town=$_POST['town'];
 $postcode=$_POST['postcode'];
 $phone=$_POST['phone'];
 $email=$_POST['email'];
 $password=$_POST['password'];
 $query = "select email from members where email='$email'";
 $link = mysql_query($query);
 if (!$link) {
  die('query error');
 }
 $num=mysql_num_rows($link);
 if ($num>0){
  die('email already exists'); //email already taken
 }
 $query = "insert into members (fname, lname, address1, address2, town, postcode, phone, email,  
   password) values('$fname','$lname','$address1','$address2','$town','$postcode','$phone',
   '$email','$password')";
 $link = @ mysql_query($query);
 if (!$link) {
  die('table write error');
 }
 header("location:../members/members.master.php?page=regconfirm.php");
?>

and the jquery code I tried to use(from this site);

function validate(){

    if(!document.getElementById("Password").value==document.getElementById("confirm_password").value)alert("Passwords do no match");
    return document.getElementById("Password").value==document.getElementById("confirm_password").value;
   return false;
    }

thanks for any help.

Answer 1

you have password's id misspelled...

here

id="passwordR"

should be

<input name="password" placeholder="Password" type="password" id="password" class="passwordEntry" required/>

so your condition is always false here since it won't be able to get the value of password

if(!document.getElementById("Password").value==document.getElementById("confirm_password").value)alert("Passwords do no match");

this should be

 if(!document.getElementById("password").value==document.getElementById("confirm_password").value)alert("Passwords do no match");

NOTE: if your are getting the element by id... the id of both should exactly be the same..

Answer 2

try this with passwordR

    function validate(){
 var password = document.getElementById("PasswordR") ;
 var confpassword = document.getElementById("confirm_password") ;
  if(password.value != confpassword.value) {
 alert("Passwords do no match");

 return false;
 }
 return true;
  }