Modify region/town Ajax drop down menu function to work on three different fields

[adamjblakey]

Hi,

I have a function here:

    var AdminResponse = "";
 
    function parseResponse(){
 
        var nText = AdminResponse.getElementsByTagName('optionText');
        var nVal = AdminResponse.getElementsByTagName('optionVal');
        document.forms["area"].elements['town'].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["area"]['town'].appendChild(nOption); 
            }
    }
 

This is part of a Ajax drop down menu for region and town, i want to mod this so that it can work on three different fields as i have three selections for region and town.

I thought this would work but it doesn't.

var AdminResponse = "";
 
    function parseResponse(field){
 
        var nText = AdminResponse.getElementsByTagName('optionText');
        var nVal = AdminResponse.getElementsByTagName('optionVal');
        document.forms["area"].elements['field'].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["area"]['field'].appendChild(nOption); 
            }
    }
 
 

On the drop down itself i have put:

onchange="update(this.value,'town')"

Any ideas?

[acoder]

Change ['field'] to [field]. You want to use the field variable, not the string "field" which probably doesn't exist.

[adamjblakey]

Thank you for your reply,

I have put this now but still does not work.

    var AdminResponse = "";
 
    function parseResponse(field){
 
        var nText = AdminResponse.getElementsByTagName('optionText');
        var nVal = AdminResponse.getElementsByTagName('optionVal');
        document.forms["area"].elements[field].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["area"][field].appendChild(nOption); 
            }
    }

I get this error:
document.forms.area.elements[field] has no properties
parseResponse(undefined)ajax.js (line 8)
onreadystatechange()ajax.js (line 30)
[Break on this error] document.forms["area"].elements[field].options.length = 1;

Cheers,
Adam

[acoder]

Are you passing the field name to parseResponse() properly?

[r035198x]

What does your update function look like?

[adamjblakey]

Here is the full set of code:

 
    var AdminResponse = "";
 
    function parseResponse(field){
 
        var nText = AdminResponse.getElementsByTagName('optionText');
        var nVal = AdminResponse.getElementsByTagName('optionVal');
        document.forms["area"].elements[field].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["area"][field].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); 
    }
 
 

[r035198x]

On line 29 of that update method, you seem not to be passing the field.

[adamjblakey]

If this was the case would it not work on one field? As it works fine when i specify the field just not when i want it to work on multiple.

[acoder]

The change you need to make is to add a second parameter to update(), say field, and then pass that to parseResponse().

[adamjblakey]

I am not entirely sure what i need to do here as i just download this from a site and did not build it. I don't really know javascript to well.

[acoder]

See the changes below:

function update(nVal, field){
 
        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(field);
                    }
                   else     {
                      alert('Error Update.php File '+ AdminRequest.statusText);
                    }
                }
            }
        var infoStr = "?choice="+nVal;
        AdminRequest.open("GET", "Update.php"+infoStr, true);
        AdminRequest.send(null); 
    }
 

[r035198x]

I am not entirely sure what i need to do here as i just download this from a site and did not build it. I don't really know javascript to well.

Trace your code from the moment the JS function update is triggered. What you need to be checking for is whether or not all the objects being accessed have been passed properly to all the functions that are called after that. Don't be shy to refer to a Javascript functions tutorial while you are at it.

Edit: Too late again

[acoder]

Trace your code from the moment the JS function update is triggered. What you need to be checking for is whether or not all the objects being accessed have been passed properly to all the functions that are called after that. Don't be shy to refer to a Javascript functions tutorial while you are at it.

This is more useful than what I've posted if "teaching a man to fish" is the objective.

[adamjblakey]

Thank you so much, works perfect now :)

[acoder]

Glad it works. I hope you understand why it works too.