For my course, I have been asked to create a html page that has the functionality of allowing a user to enter the first name of a contact, which onsubmit, loads an xml file I previously created, loops through the contacts until it matches the first name entered by the user, and displays the contact information, except the email address, on the same page, in a table with headings and a <h1> displaying The contact details are:. If there is no match, there should be a <h2> that says The contact does not exist.
The following is my XML file:
<?xml version=1.0 encoding=ISO-8859-1?>
<?xml-stylesheet type=text/xsl href=Contact.xsl ?>
<!DOCTYPE contact SYSTEM contact.dtd>
<contact>
<person>
<name>
<firstname>Bob</firstname>
<lastname>Jones</lastname>
</name>
<phone>(02)44 42 45 63</phone>
<address>
<street>34 Highway Road</street>
<city>Grovedale</city>
<state>NSW</state>
<postcode>3228</postcode>
<email>[email protected]</email>
</address>
</person>
<person>
<name>
<firstname>Gary</firstname>
<lastname>Williams</lastname>
</name>
<phone>(02)44 41 87 56</phone>
<address>
<street>223 Yarra Avenue</street>
<city>Branston</city>
<state>NSW</state>
<postcode>2317</postcode>
<email>[email protected]</email>
</address>
</person>
I have tried a few things, but I have no idea how I would get the data to display in a table. The following is my XSL file which is how I assume they want the table to be shown, but with the results of the search.
<?xml version=1.0 encoding=ISO-8859-1?><!-- DWXMLSource=Contact.xml -->
<xsl:stylesheet version=1.0 xmlns:xsl=http://www.w3.org/1999/XSL/Transform>
<xsl:template match=/>
<html>
<head>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
div {
margin-left: 150px;
margin-right: 20px;
margin-top: 50px;
width: 80%;
}
h1 {
font-size: 24px;
color: #F00;
}
.headings {
background-color: #06F;
}
.data {
background-color: #6F9;
}
.table {
border: 2px solid #F00;
width: 100%;
}
</style>
</head>
<body>
<div>
<h1>CONTACTS</h1>
<table class=table>
<tr class=headings>
<th>First Name</th>
<th>Last Name</th>
<th>Street</th>
<th>City</th>
<th>State</th>
<th>Postcode</th>
<th>Email</th>
</tr>
<xsl:for-each select=contact/person>
<tr class=data>
<td><xsl:value-of select=name/firstname/></td>
<td><xsl:value-of select=name/lastname/></td>
<td><xsl:value-of select=address/street/></td>
<td><xsl:value-of select=address/city/></td>
<td><xsl:value-of select=address/state/></td>
<td><xsl:value-of select=address/postcode/></td>
<td><xsl:value-of select=address/email/></td>
</tr>
</xsl:for-each>
</table>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
I have to use JavaScript to search the XML file and create a table displaying the results from the search.
The HTML I have is as follows:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<title>Task 2</title>
<script language=JavaScript type=text/javascript>
window.onload = loadIndex;
function loadIndex()
{
if (document.implementation && document.implementation.createDocument)
{
xmlDoc = document.implementation.createDocument(, , null);
xmlDoc.load(Contact.xml);
}
else if (window.ActiveXObject)
{
xmlDoc = new ActiveXObject(Microsoft.XMLDOM);
xmlDoc.async = false;
xmlDoc.load(Contact.xml);
}
}
function searchIndex()
{
if (!xmlDoc)
{
loadIndex();
}
var searchterm = document.getElementById(searchme).value;
var allitems = xmlDoc.getElementsByTagName(firstname);
results = new Array;
for (var i=0;i<allitems.length;i++)
{
var name = allitems[i].lastChild.nodeValue;
var exp = new RegExp(searchterm,i);
if ( name.match(exp) != null)
{
results.push(allitems[i]);
}
}
showResults(results, searchterm);
}
function showResults(results, searchterm)
{
//insert table data here to be displayed
}
</script>
</head>
<body>
First Name: <input type=text name=firstname id=searchme>
<br />
<input type=submit value=Search onClick=searchIndex(); return false;>
</body>
</html>
As you can see, I have no idea where to start. I know I would load the XML file, then gather the first name tag, then somehow compare the two then display the results.
I have seen the following, and this is similar to what I am after, but I cant get the results to display in a table.
http://www.dzone.com/snippets/simple-javascriptxml-based
Thanks for the help.
