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

    Join Date
    Nov 2010
    Posts
    128
    Rep Power
    71

    Triple Dropdown Lists


    Hi,

    Have 3 tables :
    PHP Code:
    tblColors            
        Color        
        Red        
        Violet        
        Green        
                
    tblCategory            
        Category        
        Fruit        
        Vegetable        
                
    tblCategoryColor            
        Item    Category    Color
        Apple    Fruit    Red
        Strawberries    Fruit    Red
        JackFruit    Fruit    Green
        Pear    Fruit    Green
        Brinjal    Vegetable    Violet
        Lady Finger    Vegetable    Green
        Cabbage    Vegetable    Green 
    Have a php page with a form, containing 3 dropdown lists.

    The 1st dropdown is for Colors, the source being tblColors.

    The 2nd dropdown is for Category, the source being tblCategory.

    The 3rd dropdown, should take the values input from the 1st two dropdowns & give the resultant Items - the source being tblCategoryColor.

    For eg :
    1st Dropdown Input - Red
    2nd Dropdown Input - Fruit
    The 3rd dropdown should display
    Apples
    Strawberries

    Is it possible to do this purely with PHP ?
    If Yes, some pointers as to how.
    If No, guess, javascript or ajax would be the way to go, would request some pointers.

    Request to keep things simple, as have gone quite rusty.

    Thanks
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Dec 2004
    Posts
    2,987
    Rep Power
    375
    JQUERY/AJAX is the way to go as it is good UI, with php, the user has to click two buttons & wait for the page reload = too much time

    you can do it with pure PHP. You just have to create a form, three selectboxes, and an update button next to each select.

    the logic of php should be:

    if ( first_button is isset ) {
    //query database or whatever & get an array
    } elsif ( 2nd_button is isset ) {
    //query database & get an array
    }

    when you output the boxes, you would just check if there is an array of appropriate type and fill that appropriate box
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2010
    Posts
    128
    Rep Power
    71
    Hi,
    Haven't looked in to jquery & ajax currently. As for pure php, am giving it up currently, as the three buttons on the form is discouraging.
    Was trying something using javascript & have reached a particular block in what I was trying.
    Can you take a look at below code & let me know if one can troubleshoot it.

    PHP Code:

    <html>
    <head>
        <title>Test Drop Down</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <center>
    <body>
        <?php
        
    // the start of the connection part
        // the end of the connection part
        
    ?>
        
        <SCRIPT LANGUAGE="JavaScript">
            function ChangecboCategory()
            {
                document.testColorCategoryDropDown.hid_cboCategory_changed.value = "True";
                document.testColorCategoryDropDown.submit();
            }
            
            function ChangecboColor()
            {
                document.testColorCategoryDropDown.hid_cboColor_changed.value = "True";
                document.testColorCategoryDropDown.submit();
            }
            
            function ChangecboItem()
            {
                document.testColorCategoryDropDown.hid_cboItem_changed.value = "True";
                document.testColorCategoryDropDown.submit();
            }        
        </SCRIPT>
        
        <form name = "testColorCategoryDropDown" method="POST" action = "testColorCategoryDropDown.php">
            <INPUT TYPE = "HIDDEN" NAME = "hid_cboCategory_changed">
            <INPUT TYPE = "HIDDEN" NAME = "hid_cboColor_changed">
            <INPUT TYPE = "HIDDEN" NAME = "hid_cboItem_changed">
            <table>
                <tr>
                    <td>Select Category :</td>
                    <td>
                        <?php 
                        $qryCategory 
    "select CategoryID, Category from tblCategory"
                        
    $resultqryCategory $mysqli->query($qryCategory);
                        
    ?>
                        <select name="cboCategory" id ="cboCategory"  onchange="ChangecboCategory()"><option selected>
                            <?php
                            
    echo "<option value=\"\">Select A Category</option>";
                            while (
    $row mysqli_fetch_assoc($resultqryCategory)) {
                                echo 
    "<option value='" $row['CategoryID'] . "'>" $row['Category'] . "</option>";
                            }
                            
    ?>            
                        </select>
                    </td>
                </tr>
                <tr><td>Select Color :</td>
                    <td>
                        <?php 
                        $qryColors 
    "select ColorID, Color from tblColors"
                        
    $resultqryColors $mysqli->query($qryColors);
                        
    ?>
                        <select name="cboColor" id ="cbocolor"  onchange="ChangecboColor()"><option selected>
                            <?php
                            
    echo "<option value=\"\">Select A Color</option>";
                            while (
    $row mysqli_fetch_assoc($resultqryColors)) {
                                echo 
    "<option value='" $row['ColorID'] . "'>" $row['Color'] . "</option>";
                            }
                            
    ?>            
                        </select>
                    </td>
                </tr>
                <tr><td>Select Item :</td>
                    <td>
                        <?php 
                        $qryItems 
    "select CategoryColorID, Item from tblCategoryColor where Category_ID = '".$_POST['cboCategory']."' AND Color_ID = '".$_POST['cboColor']."'" 
                        echo 
    $qryItems."<br />";
                        
    $resultqryItems $mysqli->query($qryItems);
                        
    ?>
                        <select name="cboItem" id ="cboItem"  onchange="ChangecboItem()"><option selected>
                            <?php
                            
    echo "<option value=\"\">Select an Item</option>";
                            while (
    $row mysqli_fetch_assoc($resultqryItems)) {
                                echo 
    "<option value='" $row['ItemID'] . "'>" $row['Item'] . "</option>";
                            }
                            
    ?>            
                        </select>
                    </td>
                </tr>
            </table>
        </form>
    </body>
    </html>
    What is happening is :
    When I select the 1st Dropdown - cboCategory, the value for category is stored,

    Code:
    select CategoryColorID, Item from tblCategoryColor where Category_ID = '1' AND Color_ID = ''
    next when i select the 2nd dropdown - cboColor, the value for color gets stored, but the earlier selected cboCategory Value dissapears.

    Code:
    select CategoryColorID, Item from tblCategoryColor where Category_ID = '' AND Color_ID = '3'
    and naturally, the 3rd dropdown does not return any values.

    Obviously, the way I have written the code, that is bound to happen.

    Can you correct the above or set me on the right path in the above code ?

    Thanks
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Dec 2004
    Posts
    2,987
    Rep Power
    375
    actually look at this:

    jquery.chained.remote.js search for it, it is pretty cool. lets you do what you are asking. you just need to build the php page taht gets the info based on get params
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2010
    Posts
    128
    Rep Power
    71
    Just took a look, based on your suggestion, at one of the results,
    appelsiini.net/projects/chained

    Appears,
    Chaining to Multiple Parents & Using Remote Version,
    is what I need to look in to.

    Will have a go at it & hope, I manage to get it thro my dense head.
    Meanwhile, if you find some way out in my earlier posted code, do let me know, as it would be a learning experience for me.

    Thanks
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Dec 2004
    Posts
    2,987
    Rep Power
    375
    I think when you select a box, your form gets submitted (page gets refreshed right?) and then you lose the values in the hidden fields do something like this

    Code:
            <INPUT TYPE = "HIDDEN" NAME = "hid_cboCategory_changed" value="<?= isset ($_POST['hid_cboCategory_changed']) ? $_POST['hid_cboCategory_changed'] : "";  >
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2010
    Posts
    128
    Rep Power
    71
    Hi,
    The situation is same.
    I replaced the the 3 hidden fields in my code with the one you had given. Made a couple of syntax changes ( highlighted below - Do not know, if the changes are the reason for things not working the way you expected it to behave).

    Your code :
    <INPUT TYPE = "HIDDEN" NAME = "hid_cboCategory_changed" value="<?= isset ($_POST['hid_cboCategory_changed']) ? $_POST['hid_cboCategory_changed'] : ""; >

    Code incorporated :
    <INPUT TYPE = "HIDDEN" NAME = "hid_cboCategory_changed" value="<?php isset($_POST['hid_cboCategory_changed']) ? $_POST['hid_cboCategory_changed'] : ""; ?>">

    Meanwhile, am taking a look at the jquery path, that you had suggested. It sure is a treasure box.

    Thanks
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Dec 2004
    Posts
    2,987
    Rep Power
    375
    ok so each time you change the select box & page refreshes check if those hidden fields have a value.
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2010
    Posts
    128
    Rep Power
    71
    Yes, the values are disappearing, every time the form is reposted. Have understood, what is happening.
    Will have a go with jquery & see how it goes.

    Thanks for the inputs.

IMN logo majestic logo threadwatch logo seochat tools logo