Populate Dropdown with AJAX PHP HTML

[shahidr100]

Hi,
I am trying to populate 4 dropdowns. Each one is related to other. Dropdown 1 has predefined values. On selecting data from Dropdown1, dropdown2 populates. On selecting data from dropdown2, dropdown 3 populates accordingly.
But nothing is working. Please help. I am not even sure whether my scripts are correct as I am new in this technology.

gethadith.php

    <script src="script/search.js" type="text/javascript"></script>
    <div id="hadith">

    <form action="#">
    <table>
    <tr>
    <td width="150">Hadith</td>
    <td width="500">
    <select name="mainbook" onchange='sendRequest("includes/findSubBooks.php")'>
    <option>Select Hadith Book</option>
    <option value="1">Sahih Bukhari</option>
    <option value="2">Sahih Muslim</option>
    <option value="3">Sunan Abu Dawood</option>
    </select>
    </td>
    </tr>

    <tr>
      <td width="150">Name of the Book</td>
      <td width="500">
      <p id="subdiv">
      <select name="subbook">
     <option>Select Main Book First</option>
     </select></td>
    </tr>

    <tr>
      <td width="150">Volume</td>
      <td width="500">
      <p id="subdiv">
      <select name="volume">
     <option>Select subbook first</option>
     </select></td>
    </tr>
    </table>
    </form>
    </div>

Javascript file handling AJAX

    var request;
    function getRequestObject() 
    {
        if (window.ActiveXObject) 
        {
            return(new ActiveXObject("Microsoft.XMLHTTP"));
        } 
        else if (window.XMLHttpRequest) 
        {
            return(new XMLHttpRequest());
        } 
        else 
        {
            return(null);
        }
    }

    function sendRequest() 
    {

        //var mainbookid=qry;
        //var strURL="findSubBooks.php?book=" + mainbookid;

        request = getRequestObject();
        request.onreadystatechange = showResponseText;
        request.open("GET", "findSubBooks.php", true);
        request.send(null);
    }


    function showResponseText() 
    {
        if ((request.readyState == 4) && (request.status == 200)) 
        {
            document.getElementById("subdiv").innerHTML = request.responseText;

            var ajxDisplay = document.getElementById("subdiv");
            ajxDisplay.innerHTML = request.responseText;
        }
    }

And finally the php file which will fetch the data:

    <?php
    $username = "root";
    $password = "";
    $hostname = "localhost"; 

    //connection to the database
    $dbhandle = mysql_connect($hostname, $username, $password) 
     or die("Unable to connect to MySQL");
    echo "Connected to MySQL<br>";

    //select a database to work with
    $selected = mysql_select_db("hadiths",$dbhandle) 
      or die("Could not select examples");
    ?>

    //<?php $mainbookid=intval($_GET['mainbookid']);

    $query = "SELECT subbook FROM bookofhadiths";
    $result = mysql_query($query) or die(mysql_error());

    <select name="subbook">
    <option>Select Book</option>
    <?php 
    while($row=mysql_fetch_array($result)) { ?>

    <?php 
    echo "<option value='".$row['id']."'>".$row['subbook']."</option>"; 
    ?>

    <?php } ?>
    </select>

    ?>

Please help. I am trying this since last week and no help found in internet.

Thanks in advance

[ko ko]

See demo here and here

[shahidr100]

Thankx Zero13.

Any other method with AJAX, HTML and PHP? Any clue why the code above is not working.