Start New Discussion within our Web Development Community

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

Thankx Zero13.

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

This article has been dead for over six months. Start a new discussion instead.