JavaScript function with AJAX

[cavidan29]

Hi everybody!

I want to load one listbox on the basis of the another in Java. The following function should work while I change country list.

<script>
function loadCountryRegion() {
var selectedCountryName = document.getElementById("listCountry").value;
$('#listCountryRegion').html('');
$.ajax({
type : 'GET',
dataType : 'json',
url : 'cs?action=getCountryRegionList&listCountry='+ selectedCountryName,
success : function(data) {
$.each(data.CountryRegionList, function(i, region) {
$("#listCountryRegion").append(
'<option value="' + region.name +'">'
+ region.name + '</option>');
});
},

});
}
</script>

But selectedCountryName is null. It doesn't contain the country name.

Could you please advise why it is null and what should I do?

Thanks

[ReFreezed]

Well, is the element with the id listCountry a <select> or other type of input element?

(Also, JavaScript is not the same as Java.)

[cavidan29]

listCountry is the id of 1st listbox (<select>) and listCountryRegion is the id of 2nd which I would like to populate based
on the 1st one.
I am developing my project using Java web technologies so I need to work with JQuery, Ajax, HTML, Javascript.
Variable selectedCountryName does not get country name from the listbox and I am wondering why? Maybe page is not
refreshed?

[ReFreezed]

If listCountry is an existing select element then document.getElementById("listCountry").value should be a string no matter what. If listCountry would be another kind of element than a select element, for example a paragraph, then the value property should be undefined, not null. Are you sure it's not document.getElementById("listCountry") that returns null? If that's the case then listCountry simply does not exist. (Maybe there's a misspelling somewhere.)

[cavidan29]

No, there is no misspelling. When I select the country name from the drop down list function does not get the name but when I click on submit button it gets. So I am wandering why it happens?

[ReFreezed]

Could you post the html code?

[vwphillips]

http://www.dynamicdrive.com/forums/s...-disadvantages

[cavidan29]

The code is as below:

<script>
function loadCountryRegion() {
var selectedCountryName = document.getElementById("listCountry").value;
$('#listCountryRegion').html('');
$.ajax({
type : 'GET',
dataType : 'json',
url : 'cs?action=getCountryRegionList&countryName='+ selectedCountryName,
success : function(data) {
$.each(data.CountryRegionList, function(i, region) {
$("#listCountryRegion").append(
'<option value="' + region.name +'">'
+ region.name + '</option>');
});
},


});

}
</script>

<form action="cs?action=saveDistrict" method="post">
<select name = "listCountry" id="listCountry" onchange="loadCountryRegion();">
List<Country> countryList = (List<Country>) request.getAttribute(Constants.COUNTRY_LIST);
<%for (Country country:countryList){ %>
<option name = <%=country.getCountryName() %>><%=country.getCountryName() %></option>
%} %>
</select>

<select name = "listCountryRegion" id = "listCountryRegion">
<%-- List<Region> regionList = (List<Region>) request.getAttribute(Constants.REGION_LIST);
for (Region region:regionList){ --%>
<option value = ''Choose Region''></option>
<%--} --%>
</select>
District: <input type="text" name="txtDistrict"/>
<input type="submit" name = btnSaveDistrict value = "Add District"/>
</form>


When I choose country name from drop-down box and submit the button it takes and saves the name, but function does not get.

[ReFreezed]

Well, uh, if I change the <% code... %> to something appropriate it works in Chrome and Firefox though not in IE, but you should really take a closer look at your HTML code.

<select name = "listCountry" id="listCountry" onchange="loadCountryRegion();">
List<Country> countryList = (List<Country>) request.getAttribute(Constants.COUNTRY_LIST);
<%for (Country country:countryList){ %>

Pretty sure that's supposed to be inside the <% %>

Here you're missing quotation marks around the value for the name attribute:

<option name = <%=country.getCountryName() %>><%=country.getCountryName() %></option>

And here you've surrounded the attribute value with two single quotation marks instead of using double quotation marks:

<option value = ''Choose Region''></option>

There's nothing wrong with the JavaScript.