dontera
asked on
netscape sees DOM tree different from IE
I have a page that has a form that has a value that I need to read. Using DOM, I am able to traverse to the node and retrieve the value in Netscape only. Here is the code:
var howMany = document.forms["vw-form"]. lastChild. previousSi bling.firs tChild.nex tSibling.n extSibling .getAttrib ute("value ");
That retrieves the second <input> after the <form>
Here is the code snippet of what it is looking at:
<form name=vw-form method=post action="http://order.store.yahoo.com/cgi-bin/wg-order?unique=1b8f4&catalog=gpsexplorer&et=3fb1bffc&basket=5Ccfe188d8011db33fb1b8d774d9dd2e188d88771384443a365f21eb09f06deef">
<input type=hidden name=vwcatalog value=gpsexplorer>
<input type=hidden name=vwnitems value=3>
<input type=hidden name=vwtotal value=774.85>
<input type=hidden name=basket value=5Ccfe188d8011db33fb1 b8d774d9dd 2e188d8877 1384443a36 5f21eb09f0 6deef>
<input type=hidden name=et value=3fb33f94>
<input type=hidden name=vwentropy value=1068611828>
<table width="100%" border=0 bgcolor=ffffff cellpadding=10 cellspacing=0><tr><td><fon t size=2 face=arial color=000000></font></td>< /tr><tr><t d><font size=2 face=arial color=000000><table cellpadding=0 cellspacing=0 border=0 width="100%" bgcolor=CECFCE>
<tr><td><font size=2 face=arial color=000000><table cellpadding=6 cellspacing=1 border=0 width="100%">
<tr bgcolor=cecfce><td colspan=4><font size=2 face=arial color=000000><b>Your Shopping Cart</b></font></font></td ></tr>
<tr bgcolor=eeeeee><td align=center nowrap width="43%"><font size=2 ......
and it goes on from there. I am getting the error "Object Required" from IE. Any ideas?
var howMany = document.forms["vw-form"].
That retrieves the second <input> after the <form>
Here is the code snippet of what it is looking at:
<form name=vw-form method=post action="http://order.store.yahoo.com/cgi-bin/wg-order?unique=1b8f4&catalog=gpsexplorer&et=3fb1bffc&basket=5Ccfe188d8011db33fb1b8d774d9dd2e188d88771384443a365f21eb09f06deef">
<input type=hidden name=vwcatalog value=gpsexplorer>
<input type=hidden name=vwnitems value=3>
<input type=hidden name=vwtotal value=774.85>
<input type=hidden name=basket value=5Ccfe188d8011db33fb1
<input type=hidden name=et value=3fb33f94>
<input type=hidden name=vwentropy value=1068611828>
<table width="100%" border=0 bgcolor=ffffff cellpadding=10 cellspacing=0><tr><td><fon
<tr><td><font size=2 face=arial color=000000><table cellpadding=6 cellspacing=1 border=0 width="100%">
<tr bgcolor=cecfce><td colspan=4><font size=2 face=arial color=000000><b>Your Shopping Cart</b></font></font></td
<tr bgcolor=eeeeee><td align=center nowrap width="43%"><font size=2 ......
and it goes on from there. I am getting the error "Object Required" from IE. Any ideas?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Hi,
I agree with Zontar in that you should never use a hyphen within a variable/attribute name.
You could also always simply loop through form and identify the element you are looking for (after changing the form name to 'vwForm':
formObj = document.vwForm;
for (var i = 0; i < formObj.length; i++)
{
el = formObj.elements[i];
if (el.name == "vwnitems") howMany = el.value;
}
or, if you know which element you are searching for:
howMany = formObj.elements[1].value;
remember: javascript begins counting with 0, so the second element has an index of 1
Vinny
I agree with Zontar in that you should never use a hyphen within a variable/attribute name.
You could also always simply loop through form and identify the element you are looking for (after changing the form name to 'vwForm':
formObj = document.vwForm;
for (var i = 0; i < formObj.length; i++)
{
el = formObj.elements[i];
if (el.name == "vwnitems") howMany = el.value;
}
or, if you know which element you are searching for:
howMany = formObj.elements[1].value;
remember: javascript begins counting with 0, so the second element has an index of 1
Vinny
If you do want or need to use node/sibling references, you can do stuff like this:
HTML:
<h1 id="myH1"></h1>
<div></div>
<!-- comment ... in DOM, a CommentNode object -->
<p></p>
<!-- etc. ... -->
JS:
var h1 = document.getElementById("m yH1");
var p = h1;
while(p.nodeName.toLowerCa se() != "p") // keep checking the next node until you find the p element node
p = p.nextSibling; // use toLowerCase() for compatibility with both HTML and XHTML doctypes...
// do stuff with p...
nodeName values:
--------------------
text node -->> #text
comment node -->> #comment
element node -->> same as tagName
HTML:
<h1 id="myH1"></h1>
<div></div>
<!-- comment ... in DOM, a CommentNode object -->
<p></p>
<!-- etc. ... -->
JS:
var h1 = document.getElementById("m
var p = h1;
while(p.nodeName.toLowerCa
p = p.nextSibling; // use toLowerCase() for compatibility with both HTML and XHTML doctypes...
// do stuff with p...
nodeName values:
--------------------
text node -->> #text
comment node -->> #comment
element node -->> same as tagName
ASKER
Thank you very much for the advice all. One thing I should have noted, I cannot change the form code at all (it is produced by Yahoo's shopping cart cgi which, for obvious reasons, is safely tucked away). IF they have only not included teh hyphen all of this would have been Much easier..
Thanks again..
Thanks again..
ASKER
if (document.all){
var howMany = document.getElementsByTagN
}
else {
var howMany = document.forms["vw-form"].