Member Avatar for Thirusha

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.

  • 2 Contributors
  • 2 Replies
  • 620 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Thirusha

Dani AI

Generated

's suggestion to iterate form controls is sound and explains why got the result quickly. For clearer scoping and less manual filtering, prefer using CSS selectors on the container divs so only actual form controls are returned (no type-switching required).

A concise pattern that works well with an unknown number of divs and inputs:

var divs = form.querySelectorAll('div');
divs.forEach(function(div) {
  var controls = div.querySelectorAll('input,select,textarea,button');
  controls.forEach(function(ctrl) {
    // inspect ctrl.name, ctrl.type, ctrl.value, etc.
  });
});

When inputs are added/removed dynamically, event delegation is often simpler and faster than re-querying the DOM repeatedly. Attach one listener to the form or a parent and detect which control fired the event:

form.addEventListener('change', function(e) {
  var ctrl = e.target.closest('input,select,textarea,button');
  if (ctrl && form.contains(ctrl)) {
    // handle the changed control
  }
});

Practical notes: querySelectorAll returns a static NodeList (no surprises if the DOM is mutated), while getElementsByTagName/form.elements return live collections. Convert NodeLists to arrays with Array.from() if mutation during iteration is expected. Remember radio groups share a name and only the checked radio yields a useful value; disabled controls are ignored by FormData/submission. For quick serialization of whole forms use the FormData API and filter entries by control name or by checking which controls belong to a particular div. These approaches avoid type-switching and scale cleanly as the form structure changes.

Recommended Answers

All 2 Replies

Member Avatar for ~s.o.s~

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.

<!--
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>
Member Avatar for Thirusha

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.

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.