php + mysql + ajax和jquery以注册形式

Question

I have created a register form that includes 3 drop lists, each one of those is related to the selection of the before one so I need to use the ajax but the result that I get is that the first drop list works fine but the 2 others do not work it just displays the default value <choose>

I just need to fix the 3 drop list but I displayed all the code to make others understand what I need.

register.php

<?php require_once('include/connect.php'); ?>

<?php
function specializationQuery(){

$specData = mysql_query("SELECT * FROM specialization");

  while($recordJob = mysql_fetch_array($specData)){

     echo'<option value="' . $recordJob['specialization_id'] .  '">' . $recordJob['specialization_name'] . '</option>';

  }


}

 //default value
$message = "Fields Marcked with an [*] are Required";
  $username = "";
  $fname = "";
  $lname = "";
  $specialization = "";
  $email = "";
  $pass1 = "";
  $pass2 = "";
  $governorate="";
  $district = "";
  $village = "";

if(isset($_POST['username'])){
  $username = mysql_real_escape_string($_POST['username']);
  $fname = mysql_real_escape_string($_POST['fname']);
  $lname = mysql_real_escape_string($_POST['lname']);
  $email = mysql_real_escape_string($_POST['email']);
  $pass1 = mysql_real_escape_string($_POST['pass1']);
  $pass2 = mysql_real_escape_string($_POST['pass2']);
  $bdate = mysql_real_escape_string($_POST['birthdate']);


  $specialization = mysql_real_escape_string($_POST['specialization']);
  $governorate = mysql_real_escape_string($_POST['governorate']);
  $district = mysql_real_escape_string($_POST['district']);
  $village = mysql_real_escape_string($_POST['village']);


      var_dump($fname);
      var_dump($username);
      var_dump($governorate);
      var_dump($email);

  //error handeling
  if((!$username)||(!$fname)||(!$lname)||(!$email)||(!$pass1)||(!$pass2)||(!$specialization)||(!$governorate)||(!$district)||(!$village)){
  $message = "**** Please insert the Required Fields below ****<br />";

      if($fname == "")
     {
         $message = $message . "Enter First name<br/>";
     }
      if($lname == "")
     {
         $message = $message . "Enter Last name<br/>";
     }

     if( $specialization == 0)
     {
         $message = $message . "Select Your Job<br />";

     }
     if($governorate == 0)
     {
         $message = $message . "Select Your Governorate<br />";
     }

     if($district == '0')
     {
         $message = $message . "Select Your District<br />";
     }
     if($village == '0')
     {
     $message = $message . "Select Your Village<br />";

     }
     if($email == "")
     {
         $message = $message . "Enter Email Adress<br/>";
     }
      if ($username == "") {
        $message = $message . "Enter User Name<br/>";
      }

      if($pass1 == "")
     {
         $message = $message . "Enter password<br/>";
     }

      if($pass2 == "")
     {
         $message = $message . "rechek the password <br/>";
     }


 } 

     elseif(strlen($pass1) <= 8)
    {
         $message = $message . "Your Password must be at least 8 charachters<br />";
    }
   else if($pass1!=$pass2){
   $message = "your password do not match!";
 }
 else
 {
   //securing the data
   $username = preg_replace("#[^0-9a-z]#i","",$username);
   $fname = preg_replace("#[^0-9a-z]#i","",$fname);
   $lname = preg_replace("#[^0-9a-z]#i","",$lname);
   //$pass1 = sha1($pass1);

   $email = mysql_real_escape_string($email);
   // checking for duplicate
   $user_query = mysql_query("SELECT user_name FROM user WHERE user_name = '$username'LIMIT 1") or die("could not check the username");
   $count_username = mysql_num_rows($user_query);

    $email_query = mysql_query("SELECT email_address FROM user WHERE email_address = '$email'LIMIT 1") or die("could not check the email");
   $count_email = mysql_num_rows($email_query);

    if($count_username > 0){
     $message = " your username is alredy in use";
    }elseif($count_email > 0){
      $message = "your email is alredy in use";
    }
   else{

      $query = mysql_query("INSERT INTO user(user_name, first_name, last_name, governorate, district, village, birth_date, email_address, specialization, password, registered_date)VALUES('$username', '$fname', '$lname', '$governorate', '$district', '$village', '$bdate', '$email', '$specialization', '$pass1',  now())")or die("could not insert data"); 




    $message = "you have  now been registered";



        if ($query) 
       {
       $_SESSION['user_id'] = mysql_insert_id();
       $_SESSION['login'] = 'true';
       $_SESSION['login_user'] = $username;
       }
    }
   }
 }

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>RegisterPage</title>

<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Abel|Satisfy' rel='stylesheet' type='text/css' />
<link href="default.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="../js/jquery.js"></script>

<script type="text/javascript">

 $(document).ready(function(){
                $("select#district").attr("disabled","disabled");
                $("select#village").attr("disabled","disabled");
                $("select#governorate").change(function(){
                $("select#district").attr("disabled","disabled");
                $("select#district").html("<option>wait...</option>");
                var id = $("select#governorate option:selected").attr('value');
                $.post("select_district.php", {id:id}, function(data){
                    $("select#district").removeAttr("disabled");
                    $("select#district").html(data);
                });
            });
            $("select#district").change(function(){ 
            id = $(this).val(); 
            $("select#village").attr("disabled","disabled");
            $("select#village").html("<option>wait...</option>");
            $.post("select_village.php", {id:id}, function(data){


            $("select#village").removeAttr("disabled");
            $("select#village").html(data);
         });
        });
            $("form#registerform").submit(function(){
                var cat = $("select#governorate option:selected").attr('value');
                var type = $("select#district option:selected").attr('value');
                var village = $("select#village option:selected").attr('value');

            });
    });

</script>

</head>

<body>
 <div id="banner">
  <div id="header-wrapper">
    <div id="header">
        <img src="images/web_header copy.jpg" width="1160" height="150" alt="" />
    </div>
  </div>
 </div>

  <div id="wrapper">
    <div id="page-wrapper">
        <div id="page">
            <div id="wide-content">

                   <h2 class="registerTitle">Registration Fields</h2>
                   <h3 class="registerTitle">Sign Up Today....</h3>
                   <br /><br />
<br />
<br />
<br />
<p style="color:#FF0000" align="center"><?php print("$message")?></p>
                   <!--registration fields-->
                    <?php require_once('include/select.class.php'); ?>

                   <form id="registerform" action="register.php" method="post">

    first name<span class="required-fields">*</span><br />
    <input type="text" name="fname" placeholder="Firstname" /><br /><br />
    last name<span class="required-fields">*</span><br />
    <input type="text" name="lname" placeholder="Lastname" />
    <br /> <br />
    Date of Birth<br />
    <input type="date" name="birthdate" value= "YYYY_MM_DD"  onfocus="if (this.value == 'YYYY_MM_DD') {this.value = '';}" onblur="if (this.value == '') {this.value = 'YYYY_MM_DD';}" /><br /><br />
        Specialization:<span class="required-fields">*</span><br />
        <select name="specialization"  class="select">
      <option value="0">-- Select Your Specialization --</option>

        <?php specializationQuery(); ?>
      </select>
        <br /> <br />

        Governorate<span class="required-fields">*</span><br />
        <select id="governorate" name = 'governorate'>
                <?php  echo $opt->ShowGovernorate(); ?>
                </select><br /><br />

      District<span class="required-fields">*</span><br />
      <select id="district" name="district">
                    <option value="0">choose...</option>
                </select><br /><br />
       Village<span class="required-fields">*</span><br />
       <select id="village" name="village">
                    <option value="0">choose...</option>
                </select>
        <br /> <br />

       Email:<span class="required-fields">*</span><br />
       <input type="text" name="email" placeholder="Email Adress" /><br /><br />         
       Username:<span class="required-fields">*</span><br />
       <input type="text" name="username" placeholder="Username" />
       <br /><br />  
       Password:<span class="required-fields">*</span><br />
       <input type="password" name="pass1" placeholder="Password" /><br /><br />
       Re_Password:<span class="required-fields">*</span><br />
       <input type="password" name="pass2" placeholder="Validate Password" />
       <br /><br />       
    <input type="submit" value="Register"/>
     </form>
                   <!--end of registration fields-->


            </div>
        </div>
  </div>
</div>

  <div id="footer-bg">
    <div id="footer-content" class="container">
    <div id="column3">
            <h2>About Us</h2>
            <ul class="style1">
                <li class="first">Lam El Chamel is the first web development  system for me, this system had allow me to expand my knowledge and had put me in the first step of the programming career.

           Hope that this system will respnd for user's requirements, and as each system it will have a future enhancment with taking into consideration users feedback in the feedback section.
                </li>
          </ul>
        </div>
      <div id="column4">
            <h2>Navigation</h2>
            <ul class="style1">
                <li class="first"><a href="index.php">Home</a></li>
                <li><a href="#">Map</a></li>
                <li><a href="#">Feedback</a></li>
                <li><a href="#">Search</a></li>
                <li><a href="#">Help</a></li>
            </ul>
        </div>
    </div>
</div>
<div id="footer" class="container">
    <p>Copyright (c) 2013 Lam_El_Chamel.zxq.net All rights reserved. Design by Georges Matta.
</div>
</body>
</html>

select.class.php

 <?php 
     class SelectList
    {
        protected $conn;

            public function __construct()

            {
               $this->DbConnect();
            }
        protected function DbConnect()
       {
        include "dbconfig.php";
        $this->conn = mysql_connect($host,$user,$password) OR die("Unable to connect to the database");
        mysql_select_db($db,$this->conn) OR die("can not select the database $db");
        return TRUE;
       }  

        public function ShowGovernorate()
        {
                $sql = "SELECT * FROM governorate";
                $res = mysql_query($sql,$this->conn);
                $governorate = '<option value="0">choose...</option>';
                while($row = mysql_fetch_array($res))
                {
                    $governorate .= '<option value="' . $row['governorate_id'] . '">' . $row['governorate_name'] . '</option>';
                }
                return $governorate;

        }
        public function ShowDistrict()
       {
        $sql = "SELECT * FROM districts WHERE governorate_id=$_POST[id]";
        $res = mysql_query($sql,$this->conn);
        var_dump($res);
        $district = '<option value="0">choose...</option>';
           while($row = mysql_fetch_array($res))
          {
            $district .= '<option value="' . $row['district_id'] . '">' . $row['district_name'] . '</option>';
          }
        return $district;
       }

       public function ShowVillage()
       {
        $sql = "SELECT id, village_name FROM village WHERE district_id=$_POST[id]";
        $res = mysql_query($sql,$this->conn);
        $village = '<option value="0">choose...</option>';
           while($row = mysql_fetch_array($res))
           {
             $village .='<option value="' .$row['village_id'] . '">' . $row['village_name'] . '</option>';
           }
           return $village;
       }


    }   
    $opt = new SelectList(); 


    ?>

select_village.php

<?php
 require_once('include/select.class.php'); 
    echo $opt->ShowVillage();
    ?>

select-district.php

<?php
 require_once('include/select.class.php'); 

echo $opt->ShowDistrict();
?>

Answer 1

in select.class.php better you define two variable, for using your posted variable. like:

<?php
class SelectList {
        protected $conn;

        public $governorate_id;
        public $district_id;

        public function __construct()

        {
           $this->DbConnect();
        }
}
?>

in functions ShowDistrict() and ShowVillage() you can use these variables.

use $this->varName instead of $_POST[id] .

like:

<?php
class SelectList {
        protected $conn;

        public $governorate_id;
        public $district_id;

        public function __construct()

        {
           $this->DbConnect();
        }

   public function ShowDistrict()
   {
    $sql = "SELECT * FROM districts WHERE governorate_id=".$this->governorate_id;
    $res = mysql_query($sql,$this->conn);
    var_dump($res);
    $district = '<option value="0">choose...</option>';
       while($row = mysql_fetch_array($res))
      {
        $district .= '<option value="' . $row['district_id'] . '">' . $row['district_name'] . '</option>';
      }
    return $district;
   }

   public function ShowVillage()
   {
    $sql = "SELECT id, village_name FROM village WHERE district_id=".$this->district_id;
    $res = mysql_query($sql,$this->conn);
    $village = '<option value="0">choose...</option>';
       while($row = mysql_fetch_array($res))
       {
         $village .='<option value="' .$row['village_id'] . '">' . $row['village_name'] . '</option>';
       }
       return $village;
   }
}
?>

so now you just get posted variable in select_village.php and select-district.php .

select_village.php :

<?php
     require_once('include/select.class.php'); 
     $opt->governorate_id = $_POST['id'];
     echo $opt->ShowVillage();
?>

select-district.php :

<?php
     require_once('include/select.class.php'); 
     $opt->district_id = $_POST['id'];
     echo $opt->ShowDistrict();
?>