Forum Moderators: open
I am unable to establish a connection between the form document and xml output using JS DOM feature.
Individually I am able to run them:
Here is my Xml file:cdcatalog.xml
<?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
[edited by: Anusiddhi at 1:16 pm (utc) on Jan. 30, 2008]
This may actually be a JavaScript issue [webmasterworld.com]. I'm not exactly sure if we can help you here, unless the DOM object is failing to load the XML.
choose_option()To remove the hyperlinks, I wouldn't remove the <a> elements, I'd merely change the href attribute into a title attribute and vice-versa. The link would disappear but would be easily restored because the value of href would be stored in the title. I'll illustrate.
First, you'll need to grab the mootools Javascript library. it adds some useful methods to javacript which I'll need in this example, in particular the
$()each()removeAttribute()then, you need to put a special class on those links you want to be affected. that means this line:
document.write("<a href='http://www.google.com'>"); document.write("<a href='http://www.google.com' class='artistname'>"); then create your choose_option() function. What you pass into choose_option() is a boolean true or false, saying whether to show links or not. It finds all elements with the "artistname" class, and swaps the href and title attributes.
choose_option(showlinks){
var links = $$('.artistname');
if(!showlinks){
links.each(function(link){
link.title = link.href;
link.removeAttribute('href');
});
}else{
links.each(function(link){
link.href = link.title;
link.removeAttribute('title');
});
}
}
I haven't tested this code
Step2: Needs modification to be called appropriately does not happen.
Thanks for all inputs
so why do I get the feeling I misunderstood the question.
surely you don't just mean using an if() condition while rendering the links...?
