Trying to duplicate an ajax function - stuck!

[mad4it]

Hi all,

 

I've "inherited" a site and the client has come up with a change request. Looked fairly simple (famous last words!) but I cant get the change to work!

 

Basically its one drop down which then populates a second based on the value of the first - and then a third which is populated based on the values of the first two.

 

However just getting the "new" drop down to work is causing me a problem.

 

Within the html I have this :

 

<form action="search_results.php" method="post">

                  <select name="region" class="userinput" onchange="townsrequest('select2',this.value)">

                    <option value selected="">Choose your Region</option>

                    <?php

echo $options;

?>

                  </select>

                  <select name="type" id="select2" class="userinput"  onchange="ajaxrequest('select3',region.value)">

                    <option value selected="">Choose a Town</option>

                  </select>

                  <select name="type" id="select3" class="userinput">

                    <option value selected="">Choose a Type</option>

                  </select>

                  <input type="submit" value="go">

                </form>

 

 

 

The call to "ajaxrequest" is existing and works fine. However the call to "townsrequest" does nothing.

 

The Ajax.js is as follows :

 

function get_XmlHttp() {

var xmlHttp = null;

 

if (window.XMLHttpRequest) {

xmlHttp = new XMLHttpRequest();

} else if (window.ActiveXObject) {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

 

return xmlHttp;

}

 

function ajaxrequest(tagID, post) {

var http = get_XmlHttp();

var info = 'request=' + post;

 

http.open("POST", 'destinations.ajax.regions.php', true);

http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

http.send(info);

 

http.onreadystatechange = function() {

if (http.readyState == 4) {

var mata = http.responseText.split("</option>");

 

for (i = 0; i <= (mata.length - 2); i++) {

var container = document.getElementById(tagID);

var newdiv = document.createElement("option");

if (i == 0) {

container.innerHTML = '';

}

newdiv.innerHTML = mata;

container.appendChild(newdiv);

}

 

}

}

}

 

function townrequest(tagID, post) {

var http = get_XmlHttp();

var info = 'request=' + post;

 

http.open("POST", 'destinations.ajax.towns.php', true);

http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

http.send(info);

 

http.onreadystatechange = function() {

if (http.readyState == 4) {

var mata = http.responseText.split("</option>");

 

for (i = 0; i <= (mata.length - 2); i++) {

var container = document.getElementById(tagID);

var newdiv = document.createElement("option");

if (i == 0) {

container.innerHTML = '';

}

newdiv.innerHTML = mata;

container.appendChild(newdiv);

}

 

}

}

}

 

 

 

Both destinations.ajax.regions.php (existing) and destinations.ajax.towns.php (new) return the values for the drop down boxes correctly if run manually - however only the existing one actually changes the page. The initial population of the first drop down box (using php variable $options) also works fine in all cases.

 

 

What have I missed ? I'm guessing its something really obvious!

 

Thanks!

[DBookatay]

Are you looking for something like this: http://www.login.carcityofdanbury.com/passed/index2.php  ?

The values for year, make, model, and trim are pulled from my dB.

 

If you are I can send the files over...