Working with xml and Javascript in HTML form

ElizaKaye · 03-10-2013, 01:54 AM

Hi

I have searched high and low to get some real examples of this, but no luck.
What I need to do is input a name into an input box and search the xml file (which has three different elements eg. customers root element, person/first and last. Address/street/city/state/postcode/country and Phone) to match that name. (I don't know what to do if there is more than one person with that same name).
When the match is correct then I need to bring through the rest of the relevant info belong to that person. At the moment the xml file is is working fine and coming up into a table. But now it needs the html file. I have tried many different examples of html files but cannot get it to bring through any data. Thanks in anticipation

[CODE]

<?xml version="1.0" standalone="no"?>
<?xml-stylesheet type="text/xsl" href="applyt.xsl" ?>
<customers
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="applydtd.dtd">

<person>
<name>
<first>John</first>
<last>Smith</last>
</name>
<address>
<street>123 Oak St</street>
<city>PERTH</city>
<state>WA</state>
<postcode>4372</postcode>
<country>Australia</country>
<email>js@info.com.au</email>
</address>
<phone>0754641323</phone>
</person>
<person>
<name>
<first>Zack</first>
<last>Zwyker</last>
</name>
<address>
<street>368 Elm St</street>
<city>SYDNEY</city>
<state>NSW</state>
<postcode>2000</postcode>
<country>Australia</country>
<email>zz@info.com.au</email>
</address>
<phone>0478964234</phone>
</person>
<person>
<name>
<first>Albert</first>
<last>Aikens</last>
</name>
<address>
<street>368 Cedar St</street>
<city>BRISBANE</city>
<state>QLD</state>
<postcode>7145</postcode>
<country>Australia</country>
<email>aa$info.com.au</email>

</address>
<phone>0256897426></phone>
</person>
<person>
<name>
<first>Michael</first>
<last>Jones</last>
</name>
<address>
<street>15 Cherry St</street>
<city>SYDNEY</city>
<state>NSW</state>
<postcode>2000</postcode>
<country>Australia</country>
<email>jj@info.com.au</email>
</address>
<phone>0297684321</phone>
</person>
</customers>

[CODE]

sunfighter · 03-10-2013, 08:26 PM

To put your code into the CODE tags use the hash mark (#) located in the tool bar above the Message box.

Your xml show nicely because it uses a style sheet named applyt.xsl.

I saved your xml file as customers.xml since you did not tell us a name for it. The following is html to display what you wanted. BUT you have to know the name. I could add js to show all the names or you could try it as an exercise.

Code:

<!DOCTYPE html>   <!-- Zack Zwyker    zack zwyker   -->
<html>
<body>
<input type="text" onblur="display(this.value);">

<script>
function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  }
else
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET",dname,false);
xhttp.send("");
return xhttp.responseXML;
}

function display(Aname){
xml=loadXMLDoc("customers.xml");
path="/customers/person/name"

x=xml.getElementsByTagName("first")[0].childNodes[0];
	for(z=0; z<x.length; z++){
		x=xml.getElementsByTagName("first")[z].childNodes[0];
		y=xml.getElementsByTagName("last")[z].childNodes[0];
		TheName = x.nodeValue+" "+y.nodeValue;
		if(TheName.toLowerCase() == Aname.toLowerCase()){
			document.write(x.nodeValue+" "+y.nodeValue+"<br />");
			document.write(xml.getElementsByTagName("street")[z].childNodes[0].nodeValue+"<br />");
			document.write(xml.getElementsByTagName("city")[z].childNodes[0].nodeValue+"<br />");
			document.write(xml.getElementsByTagName("state")[z].childNodes[0].nodeValue+"<br />");
			document.write(xml.getElementsByTagName("postcode")[z].childNodes[0].nodeValue+"<br />");
			document.write(xml.getElementsByTagName("country")[z].childNodes[0].nodeValue+"<br />");
			document.write(xml.getElementsByTagName("email")[z].childNodes[0].nodeValue+"<br />");
		}
	}
}
</script>
</body>
</html>