0

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
4
Views
7 Years
Discussion Span
Last Post by essential
0

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 .

0

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 topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.