hi
this is the xml file i am using
<?xml version="1.0" encoding="UTF-8"?>
<states>
<North>
<state>Minnesota</state>
<state>Iowa</state>
<state>North Dakota</state>
</North>
<South>
<state>Texas</state>
<state>Oklahoma</state>
<state>Louisiana</state>
</South>
<East>
<state>New York</state>
<state>North Carolina</state>
<state>Massachusetts</state>
</East>
<West>
<state>California</state>
<state>Oregon</state>
<state>Nevada</state>
</West>
</states>
and my html file is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Parsing XML Responses with the W3C DOM</title>
<script type="text/javascript">
var xmlHttp;
var requestType = "";
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function startRequest(requestedList) {
requestType = requestedList;
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", "parseXML.xml", true);
xmlHttp.send(null);
}
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
var box=document.getElementById("mySelect");
var region=box.options[box.selectedIndex].text;
//alert(region);
listAllStates(region);
}
}
}
function listAllStates(region) {
//alert(region);
var xmlDoc = xmlHttp.responseXML;
var selectNode=xmlDoc.getElementsByTagName(region);
//var allStates = selectNode.getElementsByTagName("state");
outputList("All States in Document", selectNode);
}
function outputList(title, states) {
var out=null;
var stu=new Array();
var currentState = null;
var child=states[0].getElementsByTagName("state");
for(var i = 0; i <child.length; i++) {
currentState = child.nodeValue;
stu=currentState;
}
for(var i=0;i<stu.length;i++)
document.write(stu);
}
</script>
</head>
<body>
<h1>Process XML Document of U.S. States</h1>
<br/><br/>
<form action="#">
<select name="mySelect" onchange="startRequest()">
<option name="North">North</option>
<option name="South">South</option>
<option name="East">East</option>
</select>
</form>
</select>
</form>
</body>
</html>
when i select a region form the drop down menu it should list me the states in the region. eg if i select 'north' it should display states in north from the xml file.
but when ever i select a region it displays null, i dont know what i am doing wrong
pls help
thanks
this is the xml file i am using
<?xml version="1.0" encoding="UTF-8"?>
<states>
<North>
<state>Minnesota</state>
<state>Iowa</state>
<state>North Dakota</state>
</North>
<South>
<state>Texas</state>
<state>Oklahoma</state>
<state>Louisiana</state>
</South>
<East>
<state>New York</state>
<state>North Carolina</state>
<state>Massachusetts</state>
</East>
<West>
<state>California</state>
<state>Oregon</state>
<state>Nevada</state>
</West>
</states>
and my html file is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Parsing XML Responses with the W3C DOM</title>
<script type="text/javascript">
var xmlHttp;
var requestType = "";
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function startRequest(requestedList) {
requestType = requestedList;
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", "parseXML.xml", true);
xmlHttp.send(null);
}
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
var box=document.getElementById("mySelect");
var region=box.options[box.selectedIndex].text;
//alert(region);
listAllStates(region);
}
}
}
function listAllStates(region) {
//alert(region);
var xmlDoc = xmlHttp.responseXML;
var selectNode=xmlDoc.getElementsByTagName(region);
//var allStates = selectNode.getElementsByTagName("state");
outputList("All States in Document", selectNode);
}
function outputList(title, states) {
var out=null;
var stu=new Array();
var currentState = null;
var child=states[0].getElementsByTagName("state");
for(var i = 0; i <child.length; i++) {
currentState = child.nodeValue;
stu=currentState;
}
for(var i=0;i<stu.length;i++)
document.write(stu);
}
</script>
</head>
<body>
<h1>Process XML Document of U.S. States</h1>
<br/><br/>
<form action="#">
<select name="mySelect" onchange="startRequest()">
<option name="North">North</option>
<option name="South">South</option>
<option name="East">East</option>
</select>
</form>
</select>
</form>
</body>
</html>
when i select a region form the drop down menu it should list me the states in the region. eg if i select 'north' it should display states in north from the xml file.
but when ever i select a region it displays null, i dont know what i am doing wrong
pls help
thanks