Member Avatar for jaykom

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

  • 2 Contributors
  • 3 Replies
  • 262 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by essential
Member Avatar for essential

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 .

Member Avatar for jaykom

hi essential,

thanks a lot :)

Member Avatar for essential

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.