get elements within a div tag

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 422,906 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,349 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 5846 | Replies: 2 | Solved

•

Join Date: Mar 2008

Posts: 117

Reputation: Thirusha is an unknown quantity at this point

Rep Power: 1

Solved Threads: 13

Thirusha

Offline

Junior Poster

get elements within a div tag

Jun 5th, 2008

I have a couple of div tags inside a form, inside those tags, there are input elements, i would like to know if there is a way to loop over all the input elements that are inside the div tags.
This has to be dynamic as i will not know the exact number of div tags or elements.

Any ideas or directions for me to search.

Thanx.

•

Join Date: Jun 2006

Location: India

Posts: 6,851

Reputation: ~s.o.s~ is a splendid one to behold

Rep Power: 23

Solved Threads: 344

~s.o.s~

Offline

Lazy, Useless & Apathetic

Re: get elements within a div tag

Jun 5th, 2008

You can loop over all the form elements using the elements attribute of the form or get all the elements under the div and do a selective filtering.

Help with Code Tags

(Toggle Plain Text)

<!--
Author: ~s.o.s~
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv"Script-Content-Type" content="text/javascript">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Example</title>
    <script type="text/javascript">
    function showOfForm(frm) {
      if(!frm || !frm.elements) {
        return;
      }
      var elms = frm.elements;
      for(var i = 0, maxI = elms.length; i < maxI; ++i) {
        var elm = elms[i];
        alert("Type: " + elm.type + "\nName: " +
                elm.name + "\nId: " + elm.id);
      }
    }
    function showOfDiv(div) {
      if(!div) {
        return;
      }
      div = typeof div === "string" ? document.getElementById(div) : div;
      var elms = div.getElementsByTagName("*");
      for(var i = 0, maxI = elms.length; i < maxI; ++i) {
        var elm = elms[i];
        switch(elm.type) {
          case "text":
          case "textarea":
          case "button":
          case "reset":
          case "submit":
          case "file":
          case "hidden":
          case "password":
          case "image":
          case "radio":
          case "checkbox":
          case "select-one":
          case "select-multiple":
            alert("Type: " + elm.type + "\nName: " +
                    elm.name + "\nId: " + elm.id);
        }
      }
    }
    </script>
</head>
<body>
  <form id="frm" name="frm" action="#">
    <div id="divOne" style="border: thick solid yellow">
      <input type="text" name="txtOne" id="txtOne"><br>
      <input type="submit" value="Click me" name="btnOne" id="btnOne"><br>
      <input type="radio" name="radGrp1" id="radOne"><br>
      <input type="radio" name="radGrp1" id="radTwo"><br>
    </div>
    <br><br>
    <div id="divTwo" style="border: thick solid red">
      <select name="selOne" id="selOne" multiple="multiple">
        <option value="one">1</option>
        <option value="two">2</option>
        <option value="three">3</option>
      </select>
      <br>
      <input type="checkbox" id="chkOne" name="chkGrp1"><br>
      <input type="checkbox" id="chkTwo" name="chkGrp1"><br>
    </div>
    <br><br>
    <input type="button" onclick="showOfForm(this.form);"
      value="Show form elements" name="btnTwo" id="btnTwo">
    <br><br>
    <input type="button" onclick="showOfDiv('divTwo');"
      value="Show div elements" name="btnThree" id="btnThree">
  </form>
</body>
</html>

<!--
Author: ~s.o.s~
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv"Script-Content-Type" content="text/javascript">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Example</title>
    <script type="text/javascript">
    function showOfForm(frm) {
      if(!frm || !frm.elements) {
        return;
      }
      var elms = frm.elements;
      for(var i = 0, maxI = elms.length; i < maxI; ++i) {
        var elm = elms[i];
        alert("Type: " + elm.type + "\nName: " +
                elm.name + "\nId: " + elm.id);
      }
    }
    function showOfDiv(div) {
      if(!div) {
        return;
      }
      div = typeof div === "string" ? document.getElementById(div) : div;
      var elms = div.getElementsByTagName("*");
      for(var i = 0, maxI = elms.length; i < maxI; ++i) {
        var elm = elms[i];
        switch(elm.type) {
          case "text":
          case "textarea":
          case "button":
          case "reset":
          case "submit":
          case "file":
          case "hidden":
          case "password":
          case "image":
          case "radio":
          case "checkbox":
          case "select-one":
          case "select-multiple":
            alert("Type: " + elm.type + "\nName: " +
                    elm.name + "\nId: " + elm.id);
        }
      }
    }
    </script>
</head>
<body>
  <form id="frm" name="frm" action="#">
    <div id="divOne" style="border: thick solid yellow">
      <input type="text" name="txtOne" id="txtOne"><br>
      <input type="submit" value="Click me" name="btnOne" id="btnOne"><br>
      <input type="radio" name="radGrp1" id="radOne"><br>
      <input type="radio" name="radGrp1" id="radTwo"><br>
    </div>
    <br><br>
    <div id="divTwo" style="border: thick solid red">
      <select name="selOne" id="selOne" multiple="multiple">
        <option value="one">1</option>
        <option value="two">2</option>
        <option value="three">3</option>
      </select>
      <br>
      <input type="checkbox" id="chkOne" name="chkGrp1"><br>
      <input type="checkbox" id="chkTwo" name="chkGrp1"><br>
    </div>
    <br><br>
    <input type="button" onclick="showOfForm(this.form);"
      value="Show form elements" name="btnTwo" id="btnTwo">
    <br><br>
    <input type="button" onclick="showOfDiv('divTwo');"
      value="Show div elements" name="btnThree" id="btnThree">
  </form>
</body>
</html>

I don't accept change. I don't deserve to live.

Happiness corrupts people.

Failing to value the lives of others cheapens your own.

•

Join Date: Mar 2008

Posts: 117

Reputation: Thirusha is an unknown quantity at this point

Rep Power: 1

Solved Threads: 13

Thirusha

Offline

Junior Poster

Re: get elements within a div tag

Jun 6th, 2008

Thanx SOS, i was able to get all the elements using the elements tag, but had no idea about the getElementByTagName, this will make my life so much easier. Thanx again.