How to solve problems of dynamically display of state when a country is selected?

For a project that I am working on, I need to dynamically retrieve the states of a particular country when the user selects the country of birth of his family members. I am using AJAX to achieve this.

I am allowed to mention only 7 family member details so I have 7 drop downs in my form for the country and state of 开发者_如何学JAVAthe family members.

Whenever the user selects a particular country, a javascript function showState is called (which is present in a separate .js file). The function has 2 parameter- one is an integer (place) which specifies the field position of the selected country (i.e whether it is country number 1, 2, 3, etc upto 7 so that the corresponding states can be displayed in the states field- state1, state2, state3....). The second is the name of the country that is passed from the form.

This function calls a controller where the states of the selected country are retrieved. Now these states has to be displayed the form. But the states do not appear.

My code is:

var stateArr=["state1","state2","state3","state4","state5","state6","state7"];
function showState(place,str){
   -------
    var url="State1Controller";
    url +="?Country1=" +str +"&state=" +stateArr[place-1];
         xmlHttp.onreadystatechange = stateChange1;
        xmlHttp.open("GET", url, true);
        xmlHttp.send(null);
}

function stateChange1(){   

    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){  
        document.getElementById(stateArr[place]).innerHTML=xmlHttp.responseText       
      }    
}

When I hardcode say state1 in document.getElementByID, then I get the desired result but not otherwise. Please help.

---

Thats because the variable place is undefined in the scope of the function stateChange1

Try this.

var stateArr = ["state1", "state2", "state3", "state4", "state5", "state6", "state7"];
var p;

function showState(place, str) {
    //-------
    p = place;
    var url = "State1Controller";
    url += "?Country1=" + str + "&state=" + stateArr[p - 1];
    xmlHttp.onreadystatechange = stateChange1;
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
}

function stateChange1() {
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
        // shouldn't we use 'p -1' instead of 'p' here also?
        document.getElementById(stateArr[p]).innerHTML = xmlHttp.responseText
    }
}

---

I believe you have named the fields in your form as country1, country2, etc and corresponding states as state1, state2, etc. So if the user selects a country in the field country1, then the states from the selected country should appear in the field state1. I hope I have got your question right.

First thing that you should do in such cases is check whether you are getting the correct values in the functions. Use alert(place), alert(str) in the showState function to check the values. Also use alert(stateArr[place]) in the stateChange1() function. Also try alert(place) in this function.

As you say that this code works right when you hard code the value like state1, I believe that the value of place is not being passed in the stateChange1() function. You can find out whether the correct value of place is being passed to the stateChange1() function by the alert(place). If appropriate value is not passed which I think is the problem, you can edit your code as:

function showState(place,str){

if(place==1){

    xmlHttp.onreadystatechange = stateChange1;
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
}else if(place==2){
    xmlHttp.onreadystatechange = stateChange2;
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
}

}

function stateChange1(){

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){  
    document.getElementById(stateArr[0]).innerHTML=xmlHttp.responseText       

}    

} function stateChange2(){
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
document.getElementById(stateArr[1]).innerHTML=xmlHttp.responseText
}}