Results 1 to 5 of 5

Thread: parentNode.childNodes not working in IE

  1. #1
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    557
    Thanks
    8
    Thanked 66 Times in 66 Posts

    Default parentNode.childNodes not working in IE

    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):
    Code:
    <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.
    - Josh

  2. #2
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    557
    Thanks
    8
    Thanked 66 Times in 66 Posts

    Default

    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[].
    - Josh

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. The Following User Says Thank You to jscheuer1 For This Useful Post:

    JShor (10-07-2009)

  5. #4
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    557
    Thanks
    8
    Thanked 66 Times in 66 Posts

    Default

    Excellent, exactly what I needed. Thanks
    - Josh

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •