#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    3
    Rep Power
    0

    Unable to populate chained dropdown list with Ajax and Javascript


    I'm new to Ajax, and programming in general, and I am currently in the midst of learning as I go.

    **My Goal**

    I am currently trying to create a chained dropdown list with the first dropdown populating itself from my database, and the second dropdown populating itself based on the user's selection in the first dropdown.

    My code(Form Page)


    Code:
    <?PHP
    session_start();
    if(@$_SESSION['Auth']!=="Yes")
    {
    echo"You are not authorised to view this page.Please click <a href='Login.php'>here</a> to login.";
    exit();
    }
    
    
    ?>
    <?PHP
    
    
    //Processing Code goes here
    
    
    ?>
    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function getcategory()
    {
    var xmlhttp;
    if(window.XMLHttpRequest)
    {//code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp= new XMLHttpRequest();
    
    
    }
    else
    {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
    if(xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("category").innerHTML=xmlhttp.responseText;
    }
    }
    xmlhttp.open("GET","AddItemCat.php","true");
    xmlhttp.send();
    }
    
    
    function getsubcategory(cat)
    {
    var xmlhttp;
    if(window.XMLHttpRequest)
    {//code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp= new XMLHttpRequest();
    
    
    }
    else
    {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
    if(xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("subcat").innerHTML=xmlhttp.responseText;
    }
    }
    xmlhttp.open("GET","AddItemSubCat.php?cat="+cat,"true");
    xmlhttp.send();
    }
    
    
    </script>
    
    
    </head>
    <body>
    <form action="<?PHP echo $_SERVER['PHP_SELF'] ?>" name="additem" enctype="multipart/form-data" method="POST">
    <table border="1" cellpadding="5" cellspacing="5">
    <tr>
    <td>Select Category: </td>
    <td>
    <select id="category" onchange="getcategory()">
    <option value="$cat"></option>
    
    
    </select>
    </td>
    </tr>
    
    
    <tr>
    <td>Select SubCategory</td>
    <td>
    <select id="subcat" onchange="getsubcategory(cat)">
    <option value=""></option>
    </select>
    </td>
    </tr>
    
    
    </table>
    </form>
    </body>
    </html>

    My Code(AddItemCat.php)

    Code:
    <?PHP
    session_start();
    if(@$_SESSION['Auth']!=="Yes")
    {
    echo"You are not authorised to view this page.Please click <a href='Login.php'>here</a> to login.";
    exit();
    }
    
    
    ?>
    
    
    <?PHP
    if(@$_SESSION['Auth']=="Yes" && @$_SESSION['Type']=="Admin")
    {
    include("cxn.inc");
    
    
    
    
    $userid=$_SESSION['UserId']
    $branchid=0;
    $getcat="SELECT * FROM `Categories` WHERE `Business`=$userid AND Branch=$branchid";
    $runcat=mysqli_query($cxn,$getcat) or die (mysqli_error($cxn));
    while($row=mysqli_fetch_assoc($runcat))
    {
    $cat=$row['Category'];
    echo"<option id='cat' value=$cat>$cat</option>";
    }
    
    
    }
    
    
    ?>

    My code(AddItemSubCat.php)

    Code:
    <?PHP
    session_start();
    if(@$_SESSION['Auth']!=="Yes")
    {
    echo"You are not authorised to view this page.Please click <a href='Login.php'>here</a> to login.";
    exit();
    }
    
    
    ?>
    
    
    <?PHP
    if(@$_SESSION['Auth']=="Yes" && @$_SESSION['Type']=="Admin")
    {
    include("cxn.inc");
    
    
    //Gets the category parameter passed from the URL
    $cat=$_GET['cat'];
    $userid=$_SESSION['UserId']
    $branchid=0;
    $getsub="SELECT * FROM `SubCategories` WHERE `Business`=$userid AND Branch=$branchid && Category==$cat";
    $runsub=mysqli_query($cxn,$getsub) or die (mysqli_error($cxn));
    while($row=mysqli_fetch_assoc($runsub))
    {
    $sub=$row['Category'];
    echo"<option value=$sub>$sub</option>";
    }
    
    
    }
    
    
    ?>
    Errors(Or rather Lack of errors)

    Both my Category and SubCategory dropdown lists are empty and nothing is showing up, and I can't see what it is exactly WTF it is that I've done wrong. Could anyone kindly point out my errors and tell me how to correct them and improve? I've been looking at the screen for 2 hours not and i'm no closer to figuring out my error as i'm not getting ANYTHING at all( no error messages), just a table with the 2 dropdown boxes that are totally empty.

    Thanks!

    PS: My ultimate aim is to create a form like the one used in online stores where the user can upload an item, together with accompanying pictures. I've yet to add the rest of the form as there is no point in it since my dropboxes are not working.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,044
    Rep Power
    119
    Here is an example of an AJAX Chained Select Menu. You look like you was a little ways off, from what you are trying to do; so I thought I would point you in the right direction.

    Good Luck

IMN logo majestic logo threadwatch logo seochat tools logo