Question

I’m looking off of this site to make a multiple drop down: Roshan’s Blog

And most of it is working, I’m just having a problem with the 3rd drop down box.
(Dropdown1: Clients, Dropdown2:Location, Dropdown3:Zone)

On my page so far, if I look at the source, after selecting the first dropdown(Client1), the second dropdown statement says:
<select style="width: 150px;" id="add-event-dialog-location" name="add-event-dialog-location" onchange="getZone(Client1,this.value)">

Which is what I need, but now, when I click on one of the options in the second drop down, it is not placing through the getZone() script. The ‘zonediv’ is not changing, and I’m not sure if the rest is going through or not. If I load the getZone.php by itself and place in my own GET statements into the URL, I get results, but I can’t get them within the page I’m calling the dropdowns from.

I’m probably just missing something small, but I’ve been looking at it so long, that I just can’t figure it out.

The HTML:

<select style="width: 150px;" name="add-event-dialog-client_name" id="add-event-dialog-client_name" onchange="getLocation(this.value)">
                    <?php
                        echo "<option selected='selected' disabled='disabled'>-Client Name-</option>";
                        $result = mysql_query("SELECT DISTINCT client_name FROM spc_clients");
                        while($row = mysql_fetch_array($result)){
                           echo "<option value='".$row['client_name']."'>".$row['client_name']."</option>";
                        }
                    ?>
               </select>
               <p id="locationdiv">
               <select style="width: 150px;" name="add-event-dialog-location" id="add-event-dialog-location" disabled="disabled">
                    <option>Select Client First</option>
               </select>
               </p>
               <p id="zonediv">
               <select style="width: 150px;" name="add-event-dialog-zone" id="add-event-dialog-zone" disabled="disabled">
                    <option>Select Location First</option>
               </select>
               </p>

Both of the JS Functions:

function getLocation(client_name) {     
    var strURL="display/getLocation.php?client_name="+client_name;
    var req = getXMLHTTP();

    if (req) {
        req.onreadystatechange = function() {

            if (req.readyState == 4) {
                // only if "OK"
                if (req.status == 200) {                        
                    document.getElementById('locationdiv').innerHTML=req.responseText;                      
                } else {
                    alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                }
            }               
        }           
        req.open("GET", strURL, true);
        req.send(null);
    }       
}

function getZone(client_name,location) {        
    var strURL="display/getZone.php?client_name="+client_name+"&location="+location;
    var req = getXMLHTTP();

    if (req) {
        req.onreadystatechange = function() {

            if (req.readyState == 4) {
                // only if "OK"
                if (req.status == 200) {                        
                    document.getElementById('zonediv').innerHTML=req.responseText;                      
                } else {
                    alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                }
            }               
        }           
        req.open("GET", strURL, true);
        req.send(null);
    }       
}

getLocation.php:

<?php 
include 'connect.php';

$client = $_GET['client_name'];

$query="SELECT location FROM spc_clients WHERE client_name='$client'";
$result=mysql_query($query) or die(mysql_error());

?>
<select style="width: 150px;" id="add-event-dialog-location" name="add-event-dialog- location" onchange="getZone(<?=$client?>,this.value)">
<option selected='selected' disabled='disabled'>-Location-</option>
<?php 
while($row = mysql_fetch_array($result)){
    echo "<option value='".$row['location']."'>".$row['location']."</option>";}
?>
</select>

getZone.php:

<?php 
include 'connect.php';

$client = $_GET['client_name']; echo $client;
$location = $_GET['location']; echo $location;

$query="SELECT zone FROM spc_clients WHERE (client_name='$client' &&     location='$location')";
$result=mysql_query($query) or die(mysql_error());
?>

<select style="width: 150px;" id="add-event-dialog-zone" name="add-event-dialog-zone">
<option selected='selected' disabled='disabled'>-Zone-</option><option><?php 
while($row = mysql_fetch_array($result)){
    echo $row['zone'];}
?>
</option>
</select>

Answer 1

Try putting quotes around Client1 — without quotes, javascript thinks it’s a variable, and since you haven’t defined any variable called Client1, you’re getting an error. Putting quotes around it makes it a string, which is what you want to pass to getZone().

Try putting this in getLocation.php:

<select style="width: 150px;" id="add-event-dialog-location" name="add-event-dialog- location" onchange="getZone('<?=$client?>',this.value)">

If any of your Client names have quotation marks in them, you’ll have to make sure to escape them, see here for how to do that:
Pass a PHP string to a JavaScript variable (and escape newlines).