parentNode.childNodes not working in IE

[JShor]

I have a form which has one row of fields displayed as QTY, Description, Stock # and Price Each. I'm trying to make it so that the onBlur attribute of the text boxes makes the empty fields appear in red.
http://www.joshshor.net/test.php

I am using parentNode to go to the tr, then following childnodes which are the td and inputs, respectively. The reason why the array in the first childNodes go in odd numbers is to bypass each cell row.

However, in IE7, I'm getting the following error when onBlur is activated:
parentNode.parentNode.childNodes.5.childNodes is null or not an object.

Here's the code (to save space, I only put in one row of boxes):


<script type="text/javascript">
var oktosend = true;
function chkfrm(obj) {
if(obj.value.length > 0) {
alert(obj.parentNode.parentNode.childNodes[3].childNodes[0].name);
alert(obj.parentNode.parentNode.childNodes[5].childNodes[0].name);
alert(obj.parentNode.parentNode.childNodes[7].childNodes[0].name);
alert(obj.parentNode.parentNode.childNodes[1].childNodes[0].name);
if(obj.parentNode.parentNode.childNodes[3].childNodes[0].value == '') {
obj.parentNode.parentNode.childNodes[3].childNodes[0].style.background = "#ff0000";
oktosend = true;
} else {
obj.parentNode.parentNode.childNodes[3].childNodes[0].style.background = "#ffffff";
oktosend = false;
}
if(obj.parentNode.parentNode.childNodes[5].childNodes[0].value == '') {
obj.parentNode.parentNode.childNodes[5].childNodes[0].style.background = "#ff0000";
oktosend = true;
} else {
obj.parentNode.parentNode.childNodes[5].childNodes[0].style.background = "#ffffff";
oktosend = false;
}
if(obj.parentNode.parentNode.childNodes[7].childNodes[0].value == '') {
obj.parentNode.parentNode.childNodes[7].childNodes[0].style.background = "#ff0000";
oktosend = true;
} else {
obj.parentNode.parentNode.childNodes[7].childNodes[0].style.background = "#ffffff";
oktosend = false;
}
if(obj.parentNode.parentNode.childNodes[1].childNodes[0].value == '') {
obj.parentNode.parentNode.childNodes[1].childNodes[0].style.background = "#ff0000";
oktosend = true;
} else {
obj.parentNode.parentNode.childNodes[1].childNodes[0].style.background = "#ffffff";
oktosend = false;
}
}
if(obj.value == '') {
obj.parentNode.parentNode.childNodes[1].childNodes[0].style.background = "#ffffff";
obj.parentNode.parentNode.childNodes[3].childNodes[0].style.background = "#ffffff";
obj.parentNode.parentNode.childNodes[5].childNodes[0].style.background = "#ffffff";
obj.parentNode.parentNode.childNodes[7].childNodes[0].style.background = "#ffffff";
oktosend = true;
}
}
</script>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" id="frmOrder">
<table align="center" cellspacing="0" id="tblOrder">
<tr>
<td width="50" height="21" align="center">
<b>QTY</b></td>
<td width="323" height="21" align="center">
<b>DESCRIPTION</b></td>
<td width="148" height="21" align="center">
<b>Stock#</b></td>
<td width="35" height="21" align="center">
<b>Price Each</b></td>
</tr>
<tr>
<td align="center"><input type="text" name="qty[]" onblur="chkfrm(this)" size="4" maxlength="6" style="border: 1px solid #000000" class="memorize" /></td>
<td align="center"><input type="text" name="desc[]" size="45" onblur="chkfrm(this)" style="border: 1px solid #000000" class="memorize" /></td>
<td align="center"><input type="text" name="stock[]" size="17" onblur="chkfrm(this)" style="border: 1px solid #000000" class="memorize" /></td>
<td align="center"><input type="text" name="price[]" size="11" onblur="chkfrm(this)" style="border: 1px solid #000000" class="memorize" /></td>
</tr>
</table>

<div id="addTo" align="center">
</div>

<p align="center">
<b>+</b> <a href="javascript:addtxtbxs()">Add More Items</a>
</p>
</form>

<p align="center">
<button onclick="sendForm()"><font color="#ff0000"><b>Send Order</b></font></button>
</p>


Any help is HUGELY appreciated. :)

[JShor]

Additional note, that I set alert();'s to popup displaying each field name that is found via childNodes[]. In IE7, I get only price[]. In Firefox, I get all three: qty[], desc[], stock[], and price[].

[jscheuer1]

The counting of childNodes varies. Some browsers include empty textNodes, some do not. In this sort of operation as I believe you are describing, it is better to use the parent's getElementsByTagName() method. That way the number of chidren and index of each child you are looking for will be consistent.

[JShor]

Excellent, exactly what I needed. Thanks:)

[jscheuer1]

Hey, you are part of the up and coming - in large part that's what we're here for. You're welcome.