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.
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>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.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.