Needs Help With 2 Dependent Drop Down Boxes

Message Topic Search Topic Options Post Reply Create New Topic Printable Version Translate Topic

I have three drop down boxes and two are dependent. The area drop down box is supposed to be dependent on the state drop down box. Then the city drop down box is supposed to be dependent on the area drop down box. Please look at http://www.locateahomebuilder.com/misty.asp. Choose North Carolina. Then you will see a list of options in the area box. Please choose Western North Carolina. It then disappears. The City drop down box doesn't work at all. Please especially look at the bolded parts. I tested getlocation.asp to see if it worked on their part. For example, look at http://www.locateahomebuilder.com/GetLocation.asp?q=nc&query=Area for the Area query. Please also look at http://www.locateahomebuilder.com/GetLocation.asp?q=110&query=City for the City query. I believe it is a Javascript or AJAX problem. Can someone please help me with this? 
There are two files to this. Let me post the code for both files. 
Code For Misty.asp: 
 [code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script type="text/javascript">
var xmlHttp
var elementid;
// Usage onchange="showCustomer('div Id', 'Serverside page', this.value)"
// div id, The id of the element the data is returned to
// Serverside page, The name of the asp page run on the server excluding the extension .asp
// this.value, the value to be passed to the server page
function showLoc(divid, page, qry, str)
{ 
elementid = divid;
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  } 
var url=page+".asp";
url=url+"?q="+str;
url=url+"&query="+qry;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged() 
{ 
if (xmlHttp.readyState==4)
{ 
document.getElementById(elementid).innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}
</script>
<table>
 <tr>
  <td align="right"><strong><font face="arial" size="-1">State </font>
  </strong></td>
  <td><select name="selState" onchange="showLoc('selAreaDiv', 'GetLocation', 'Area', this.value)">
  <option value="">Select One</option>
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
  <option value="AR">Arkansas</option>
  <option value="CA">California</option>
  <option value="CO">Colorado</option>
  <option value="CT">Connecticut</option>
  <option value="DE">Delaware</option>
  <option value="DC">District of Columbia</option>
  <option value="FL">Florida</option>
  <option value="GA">Georgia</option>
  <option value="HI">Hawaii</option>
  <option value="ID">Idaho</option>
  <option value="IL">Illinois</option>
  <option value="IN">Indiana</option>
  <option value="IA">Iowa</option>
  <option value="KS">Kansas</option>
  <option value="KY">Kentucky</option>
  <option value="LA">Louisiana</option>
  <option value="ME">Maine</option>
  <option value="MD">Maryland</option>
  <option value="MA">Massachusetts</option>
  <option value="MI">Michigan</option>
  <option value="MN">Minnesota</option>
  <option value="MS">Mississippi</option>
  <option value="MO">Missouri</option>
  <option value="MT">Montana</option>
  <option value="NE">Nebraska</option>
  <option value="NV">Nevada</option>
  <option value="NH">New Hamsphire</option>
  <option value="NJ">New Jersey</option>
  <option value="NM">New Mexico</option>
  <option value="NY">New York</option>
  <option value="NC">North Carolina</option>
  <option value="ND">North Dakota</option>
  <option value="OH">Ohio</option>
  <option value="OK">Oklahoma</option>
  <option value="OR">Oregon</option>
  <option value="PA">Pennsylvania</option>
  <option value="RI">Rhode Island</option>
  <option value="SC">South Carolina</option>
  <option value="SD">South Dakota</option>
  <option value="TN">Tennessee</option>
  <option value="TX">Texas</option>
  <option value="UT">Utah</option>
  <option value="VT">Vermont</option>
  <option value="VA">Virginia</option>
  <option value="WA">Washington</option>
  <option value="WV">West Virginia</option>
  <option value="WI">Wisconsin</option>
  <option value="WY">Wyoming</option>
  </select> </td>
 </tr>
 <tr>
  <td align="right"><strong><font face="arial" size="-1">Area </font>
  </strong></td>
  <td>
  <div id="selAreaDiv">
   <select name="selArea" onchange="showLoc('selCityDiv', 'GetLocation.asp', 'City', this.value)">
   <option value="">Select Area</option>
   </select> </div>
  </td>
 </tr>
 <tr>
  <td align="right"><strong><font face="arial" size="-1">City </font>
  </strong></td>
  <td>
  <div id="selCityDiv">
   <select name="selCity">
   <option value="">Select City</option>
   </select> </div>
  </td>
 </tr>
<