1

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>
Nicole
  • 123
  • 3
  • 16
  • Have you tried using http://getfirebug.com/ in Firefox, or Chrome's Developer Tools to look for any javascript errors and/or see the results of your AJAX calls? – jessica Apr 20 '12 at 23:30
  • I get a "Uncaught exception: ReferenceError: Undefined variable: Client1" in Opera's error console. Still, not sure why. – Nicole Apr 20 '12 at 23:36
  • Ah, I see the problem now. I'll post an answer.. – jessica Apr 21 '12 at 01:11

1 Answers1

0

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).

Community
  • 1
  • 1
jessica
  • 3,051
  • 2
  • 30
  • 31
  • I can't believe I missed that! Ugh, I knew it was going to be something as simple as that. The reference I used didn't have them either, that's probably one of the reasons why couldn't see the issue. – Nicole Apr 23 '12 at 17:21
  • @Nicole Cool, if that fixed it for you, I'd appreciate an accept! :) – jessica Apr 23 '12 at 19:05