Changing options in second drop down menu by user input in first drop down menu

Question

Thanks for taking time to look at this.

I have two drop down menus. The first is a list of clients, the second is a list of projects.

All projects are tied to just one client, so I'd like for the code to get user input for the client, then read that value, and modify the PHP code to only print out the values in the second drop down menu that correspond to the client selected.

Here's some code. For the first drop down menu:

     <div class="item">
                <label for='clSel' id='tsClLabel'>Client:</label>
                <select name='clSel' id='wClient' onChange="bGroup();">
                    <option></option>
                    <?php
                    $cQuery = "SELECT * FROM Clients ORDER BY Client_Name";
                    $cResult = mysql_query($cQuery);
                    while($cData = mysql_fetch_assoc($cResult)) {
                        echo '<option id="Cid" value="'.$cData['Id'].'">'.$cData['Client_Name'].'</option>';
                    }
                    ?>
                </select>

Here's my jQuery function to get the user-selected value from the first drop down:

           <script>
            function bGroup(){
                val1 = $("#wClient").val();
               // window.alert(val1);
              //  $('#div1').html(val1);
                return val1;
            }
        </script>

And the code for the second drop down menu:

                <label for='billGroupId'>Billing Group: </label>
                <select name='billGroupId'>
                    <option value=''></option>
                    <?php
                        $sql = "SELECT * FROM Billing_Groups ORDER BY Client_Id, Name";
                        $sth=$dbh->prepare($sql);
                        $sth->execute();
                        while ($row = $sth->fetch())
                        {
                            if ($row['Name']!= ''){
                                echo "<option value='".$row['Id']."' > ".$row['Name']."</option>";
                                echo "<script> bGroup(); </script>"
                            }
                        }
                    ?>
                </select>

I know I need to include a WHERE statement in the second drop down menu

Basically Select * FROM Clients WHERE Client_ID == $jsVAR.

I already have the value I need in the var1 JavaScript variable. How can I get this little piece of data either read by PHP or sent to PHP via JS code?

Thanks!!

you cannot read javascript variables with php unless the variable is passes as a POST/GET variable. PHP code runs on the server side all at one time and then presented to the user. Javascript on the other hand is client side and is ran while/after being presented to the user. What you are looking for is either reload the page after selecting client or use an ajax request to get process a script without reloading the page. — amaster
– amaster, Commented Sep 16, 2013 at 14:20

Logarytm Całkowy · Accepted Answer · 2013-09-16 14:31:49Z

0

You can SELECT all records from the database, and then insert them to your page HTML using json_encode(). Something like that:

<?php
$sql = "SELECT * FROM Billing_Groups ORDER BY Client_Id, Name";
$sth=$dbh->prepare($sql);
$sth->execute();
$projectData = array();
while ($row = $sth->fetch())
{
    if ($row['Name']!= ''){
        $projectData[$row['Client_Id']][] = $row;
    }
}
echo '<script type="text/javascript">var projects=', json_encode($projectData), ';</script>';
?>

Then, in your JS, you use the variable projects as an associative array (object), eg.:

<script type="text/javascript">
for (p in projects[clientId]) {
    alert(projects[p].Name);
}
</script>

answered Sep 16, 2013 at 14:31

Logarytm Całkowy

3981 gold badge2 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Darren Crabb · Accepted Answer · 2013-09-16 14:23:30Z

Tricky one, You have a choice. One way is to use Ajax to grab the second level menu structure upon getting the first level choice, and populate the second level once that succeeds. That's likely to be a problem, as there will likely be some sort of network delay while that happens, of which you have no control (unless you are in a closed environment). So from a user point of view it could be counter intuitive and sluggish feeling, especially on a slow connection or shared hosting solution where timings can vary enormously.

The other way is to somehow pull all values possible and filter them (so hide the ones that don't apply) using jQuery, perhaps utilising classes or some other attribute as a method of filtering data. Using jQuery you can assign data to elements so you could also use that too. The second method may not be so good if there's a lot of data (can't tell from the scenario you've described). Looking at your second level code I don't see a WHERE condition so I'm not sure how the value from the first level is affecting that of the second level, so it's hard to know how to deal with that for this method.

Collectives™ on Stack Overflow

Changing options in second drop down menu by user input in first drop down menu

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related