Dynamic List Not Working

[adamjblakey]

Hi,

I have a dynamic country and region list i am trying to get working but for some reason when i select a country the next region field does not populate.

Here is the code:

HTML

<select name="country" onchange="update(this.value)">                        <option value="184">USA</option>
                                                <option value="183">United Kingdom</option>
                </select>
 
                <select name="region" onchange="alert(this.value)">
                    <option value="">Make a selection </option>
                </select>
 
 

Javascript

 
    var AdminResponse = "";
 
    function parseResponse(){
 
        var nText = AdminResponse.getElementsByTagName('optionText');
        var nVal = AdminResponse.getElementsByTagName('optionVal');
        document.forms[0]['region'].options.length = 1;
        for (i=0; i<nText.length; i++)
            { 
             var nOption = document.createElement('option'); 
             var isText = document.createTextNode(nText[i].firstChild.data); 
             nOption.setAttribute('value',nVal[i].firstChild.data); 
             nOption.appendChild(isText); 
             document.forms[0]['region'].appendChild(nOption); 
            }
    }
 
    function update(nVal){
 
        var AdminRequest = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();   
        AdminRequest.onreadystatechange = function()
            {
              if (AdminRequest.readyState == 4)
                {
                   if (AdminRequest.status == 200)
                    {
                       AdminResponse = AdminRequest.responseXML;
                       parseResponse();
                    }
                   else     {
                      alert('Error Update.php File '+ AdminRequest.statusText);
                    }
                }
            }
        var infoStr = "?choice="+nVal;
        AdminRequest.open("GET", "Update.php"+infoStr, true);
        AdminRequest.send(null); 
    }
 
 

PHP
[PHP]
<?php

$choice = $_GET['choice'];
$xml = "<?xml version='1.0' ?><options>";

require_once('init.php');

$query = "SELECT * FROM regions WHERE countryid = '$choice'";
$result = @mysql_query($query);
$num = @mysql_num_rows($result);
if ($result && $num > 0)
{
while ($row = mysql_fetch_array($result,MYSQL_ASSOC))
{
$xml .= "<optionText>" . $row['region'] . "</optionText><optionVal>" . $row['region'] . "</optionVal>";
}
}
$xml .= "</options>";
@mysql_free_result($result);
@mysql_close();
header("Content-Type: text/xml");
echo $xml;

?>
[/PHP]


SQL Structure

id / countryid / region

1 / 184 / Brighton
2 / 184 / Berkshire
3/ 184 / Bath Avon
4 / 184 / Bedfordshire
5 / 183 / Alabama
6 / 183 / Alaska
7 / 183 / American Samoa
8 / 183 / Arizona


Any help would be greatfully appreciated.

Cheers,
Adam

[acoder]

Hi Adam, welcome to TSDN!

Check the responseXML object. Does it have the data you expect?

[adamjblakey]

Thank you.

How would i go about checking this?

[acoder]

Try alerting it.

[adamjblakey]

I have just ran Firebug on the page when i select a country and it shows me the following error:

document.forms[0].region has no properties
[Break on this error] document.forms[0]['region'].options.length = 1;

Any Ideas?
Cheers,
Adam

[acoder]

That should be document.forms[0].elements['region'].options.

[adamjblakey]

Hi,

Now i am getting the following error:

document.forms[0].elements.region has no properties
[Break on this error] document.forms[0].elements['region'].options.length = 1;

Cheers,
Adam

[acoder]

Is this the only or first form on the page?

[adamjblakey]

Yes there is 2 other forms on the page. I have just removed these and it works fine.

How can i get this to work with the other forms?

[acoder]

Instead of forms[0], use forms[formName] to target the particular form.

[adamjblakey]

Thank you for that,

I have tried document.form.name['register'].elements['region'].options.length = 1; but does not seem to be working. Have i done something wrong?

[acoder]

That should be document.forms['register'].

[adamjblakey]

Thanks a lot acoder it is working fine now.

Thanks a lot for sticking with me on this one :)

[acoder]

No problem. Post again if you have more questions.