www.webdeveloper.com
Results 1 to 8 of 8

Thread: three dependant drop down boxes

  1. #1
    Join Date
    Dec 2007
    Posts
    57

    three dependant drop down boxes

    Hi
    Im trying to make three dependant drop down boxes which get information from a database with Ajax and PHP. Everything works when I select a number in the first drop down box but if I select a word then the second drop down box works but the third one does not <---how strange is that lol. Ive been looking at this for three whole days lol. Can anyone help me??

    PHP Code:

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script language="javascript" type="text/javascript">

    function getXMLHTTP() { //fuction to return the xml http object
            var xmlhttp=false;    
            try{
                xmlhttp=new XMLHttpRequest();
            }
            catch(e)    {        
                try{            
                    xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch(e){
                    try{
                    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                    }
                    catch(e1){
                        xmlhttp=false;
                    }
                }
            }
                 
            return xmlhttp;
        }
        
        function getone(category) {
            
            var strURL="findcategory.php?category="+category;
            var req = getXMLHTTP();
            
            if (req) {
                
                req.onreadystatechange = function() {
                    if (req.readyState == 4) {
                        // only if "OK"
                            document.getElementById('fnamediv').innerHTML=req.responseText;                        

                    }                
                }            
                req.open("GET", strURL, true);
                req.send(null);
            }
        }
        
                function gettwo(category,fname) {
            var strURL="findcomments.php?category="+category+"&fname="+fname;
            var req = getXMLHTTP();

            if (req) {

                req.onreadystatechange = function() {
                    if (req.readyState == 4) {
                            document.getElementById('commentsdiv').innerHTML=req.responseText;

                    }
                }
                req.open("GET", strURL, true);
                req.send(null);
            }
        }
        </script>
        </head>
    <body>
    <?php
    $link 
    mysql_connect('localhost'''''); //changet the configuration in required
    if (!$link) {
        die(
    'Could not connect: ' mysql_error());
    }
    mysql_select_db('');
    $query="SELECT Distinct category FROM test";
    $result=mysql_query($query);
    ?>

    <form method="post" action="" name="form1">
    <table width="60%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="150">category</td>
        <td  width="150"><select name="category" onChange="getone(this.value)">
        <option value="">Select category</option>
        <? while($row=mysql_fetch_array($result)) { ?>
    <option value="<? echo $row["category"]?>"><? echo $row["category"]?></option>
    <? ?>
    </select></td>
      </tr>
      <tr style="">
        <td>name</td>
        <td ><div id="fnamediv"><select name="fname" >
        <option>Select category First</option>
            </select></div></td>
            </tr>
      <tr style="">
        <td>comments</td>
        <td ><div id="commentsdiv"><select name="comments" >
        <option>Select name First</option>
            </select></div></td>
            </tr>
            
    </table>
    </form>
    </body>
    </html>
    Second drop down box is made from here (findcategory.php)...

    PHP Code:

    <?php
    $category
    $_GET["category"];
    echo 
    $category;
    $link mysql_connect('localhost'''''); 
    if (!
    $link) {
        die(
    'Could not connect: ' mysql_error());
    }
    mysql_select_db('');
    $query="SELECT * FROM test WHERE category='$category'";
    $result=mysql_query($query);

    ?>
    <select name="fname" onchange="gettwo(<? echo $category?>,this.value)">
    <option>Select name</option>
    <? while($row=mysql_fetch_array($result)) { ?>
    <option value="<? echo $row["fname"]?>"><? echo $row["fname"]?></option>
    <? ?>
    </select>
    the third drop box gets its results from here (findcomments.php)....

    PHP Code:

    <?
    $category
    $_GET["category"];
    $fname$_GET["fname"];
    echo 
    $category;
    echo 
    "<br>";
    echo 
    $fname;
    $link mysql_connect('localhost'''''); //changet the configuration in required
    if (!$link) {
        die(
    'Could not connect: ' mysql_error());
    }
    mysql_select_db('');
    $query="SELECT id,comments FROM test WHERE fname='$fname' AND category='$category'";
    $result=mysql_query($query);

    ?>
    <select name="comments">
    <option>Select comments</option>
    <? while($row=mysql_fetch_array($result)) { ?>
    <option value><?=$row["comments"]?></option>
    <? ?>
    </select>
    Last edited by james19; 12-08-2009 at 07:18 PM. Reason: uploaded wrong version of code

  2. #2
    Join Date
    Dec 2007
    Posts
    57
    I know im very close and il try any idea.

  3. #3
    Join Date
    Jan 2009
    Posts
    3,346
    Where is gettwo defined in your javascript? I was only able to find getone.
    <select name="fname" onchange="gettwo(<? echo $category; ?>,this.value)">

  4. #4
    Join Date
    Dec 2007
    Posts
    57
    Hi
    thanks for the reply. gettwo is just below getone:

    PHP Code:

                
    function gettwo(category,fname) { 
            var 
    strURL="findcomments.php?category="+category+"&fname="+fname
            var 
    req getXMLHTTP(); 

            if (
    req) { 

                
    req.onreadystatechange = function() { 
                    if (
    req.readyState == 4) { 
                            
    document.getElementById('commentsdiv').innerHTML=req.responseText

                    } 
                } 
                
    req.open("GET"strURLtrue); 
                
    req.send(null); 

  5. #5
    Join Date
    Dec 2007
    Posts
    57
    HI

    Im still doing this (getting annoyed and kind of desperate). Someone mentioned the problem could be because their are blank spaces somewhere when the PHP code is used in conjunction with Javascript.

    Alternatively if someone has done this previously it would be very helpful if they could give me it.

    If you have any thoughts please let me know

  6. #6
    Join Date
    Jan 2009
    Posts
    3,346
    Have you tried using quotes around your passed value?
    Code:
    <select name="fname" onchange="gettwo('<?php echo $category; ?>',this.value)">

  7. #7
    Join Date
    Jan 2009
    Posts
    3,346
    Have you tried adding an alert in the javascript functions to check that the query string is being built properly? You can then paste the query string into the location bar to get just the output from the PHP. Sounds like one of the steps along the way might have an error but because it is AJAX we don't see it.

  8. #8
    Join Date
    Dec 2007
    Posts
    57
    ok this gives me something to try. I have spent so long on this its crazy lol

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles