Forum Moderators: open
<?xml version="1.0" encoding="ISO-8859-1"?>
<catalog>
<cd>
<title>Midt om natten</title>
<artist>Kim Larsen</artist>
</cd>
<cd>
<title>Pavarotti Gala Concert</title>
<artist>Luciano Pavarotti</artist>
</cd>
<cd>
<title>The dock of the bay</title>
<artist>Otis Redding</artist>
</cd>
<cd>
<title>Picture book</title>
<artist>Simply Red</artist>
</cd>
</catalog>
Here is my html file: Running fine on above xml
<html>
<head>
<head>
<body>
<script type="text/javascript">
<!--
var xmlDoc=null;
if (window.ActiveXObject)
{// code for IE
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
else if (document.implementation.createDocument)
{// code for Mozilla, Firefox, Opera, etc.
xmlDoc=document.implementation.createDocument("","",null);
}
else
{
alert('Your browser cannot handle this script');
}
if (xmlDoc!=null)
{
xmlDoc.async=false;
xmlDoc.load("cdcatalog.xml");
var x=xmlDoc.getElementsByTagName("cd");
document.write("<table border='1'>");
document.write("<thead>");
document.write("<tr><th>Artist</th><th>Title</th></tr>");
document.write("</thead>");
document.write("<tfoot>");
document.write("<tr><th colspan='2'>This is my CD collection</th></tr>");
document.write("</tfoot>");
for (var i=0;i<x.length;i++)
{
document.write("<tr>");
document.write("<td>");
document.write("<a href='http://www.google.com'>");
document.write(x[i].getElementsByTagName("artist")[0].childNodes[0].nodeValue);
document.write("</a>");
document.write("</td>");
document.write("<td>");
document.write(x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("</tr>");
}
document.write("</table>");
}
-->
</script>
</body>
</html>
Here is the problem:
I need to get the above htm with the "anchor" tag on artist when drop down option selected is yes and without an anchor tag on artist when drop down option selected is no.
My form code working fine inserted in the body tag:
<form name="form1" method="post" action="">
<div>
<select name="select1" onchange="choose_option(this.value)">
<option selected value="">Choose an option</option>
<option selected value="yes">Put an anchor</option>
<option value="no">Do not put an anchor</option>
</select>
</div>
</form>
I am sure missing a great link (On handling HTML/JS DOM)Please respond
The conditional shouldn't be all that bad. You just have to check the value of the select input and then choose to write to the document or not. Here's a real quick example:
sel = document.from1.select1;
if(sel.options[sel.selectedIndex].value = 'yes') {
//show anchors
} else {
// don't show anchors
}
See where that gets you :)
