Hi folks,

My example markup as follows

<fieldset>
<input type="text"></input>
<input type="text"></input>
<select></select>
</fieldset>
<fieldset>
<input type="checkbox"></input>
<input type="text"></input>
<select></select>
</fieldset>

I want to collect all the child elements inside this two fieldset elements through looping, folks please help me out

There's alot of ways to do this.

But try this one first, looping from the basic steps using two for(){} statement...

<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
<!--

var getChilds = function( root ) {
   var div;
   var count = 0; 
   div = document.getElementById("output");
   root = document.getElementsByTagName( root );
      for ( var i = 0; i < root.length; i++ ) {
      count += root[ i ].children.length;
      div.innerHTML += "Root #" + (( i ) + 1 ) + " " + root[ i ].nodeName + "&#8212;<br>Childs :<br>";
      {    for ( var x = 0; x < count; x++ ) {
           var child = root[ i ].getElementsByTagName("*");
              if ( child[ x ].nodeName.toLowerCase() === "br" ) { 
           continue 
              }
           div.innerHTML +=  (( child[ x ].type ) ? " &lt;" + String( child[ x ].type.toUpperCase() ).fontcolor("green") + "&gt; <br>" : " &lt;" + String( child[ x ].nodeName.toUpperCase()).fontcolor("green") + "&gt; <br>" ); 
         } 
      } div.innerHTML += "<hr>";
   }  
};

window.onload = function() {
getChilds( "fieldset" );
}

//-->
</script>
</head>
<body>
<div>
<fieldset>
Field1: <input id="txt1" name="txt1" type="text" value=""><br>
Field2: <input id="txt2" name="txt2" type="text" value=""><br>
Lists Option1: <select id="sel1" name="sel1" size="1">
<option value="list1">Option 1</option>
<option value="list2">Option 2</option>
</select>
</fieldset>

<fieldset>
Checkbox1: <input type="checkbox" id="chk1" name="chk1" value="checkbox"><br>
Lists Option2: <select id="sel2" name="sel2" size="1">
<option value="list1">Option 1</option>
<option value="list2">Option 2</option>
</select>
</fieldset>
<div id="output" style="margin-top : 1em; padding : 0 1em 0 1em; line-height : 1.6; letter-spacing : 2px;"></div>
</div>
</body>
</html>

can be also referred as obj.children[ index ].properties .

You are welcome...
Just don't forget to mark your thread solved, if it does solved the issue. So that it won't confused other viewers (or guest) on this site.

Thanks...
essential

This article has been dead for over six months. Start a new discussion instead.