CODEWITHSUNDEEP
javascripthtmlcssforms
Qwerty Qwerts
Qwerty Qwerts

Reputation: 1721

How to grab all child inputs of a specifc div/form using just javascript?

I saw a similar post here, however I want to do something similar using javascript. Basically there a method to grab all user input in some container such as a div or form

<form>
<div>
   <text>
</div>
<div>
  <textarea>
</div>    
 <div>
   <select>
</div>
</form>

An example would be to grab text, textarea, select, and other forms of user input. I saw something like 

var elements = document.myform.getElementsByTagName("input")

But it wouldn't work for selects. I know I could possibly just have a duplicate method which attempts to find ("select") but what if the form must keep the order in which user put in information.

EDIT: Thank you for all the responses. Does all the methods mentioned so far only work if the inputs are direct descendants or is there some other method?

Upvotes: 6

Views: 10597

Answers (3)

Unmitigated
Unmitigated

Reputation: 89214

You can use a query selector.

document.querySelectorAll('#divID input, #divID select, #divID textarea');
//selects all elements contained by #divId that are input, textarea, or select elements


<div id="myDiv">
<form>
<input type="text">
<select>
<option>1</option>
</select>
<textarea>Text...</textarea>
<div>
 <span>
     <select id="nestedSelect"></select>
 </span>
</div>
</form>
</div>
<script>
var inputs = document.querySelectorAll('#myDiv input, #myDiv select, #myDiv textarea');
for(let i = 0; i < inputs.length; i++){
  console.log(inputs[i]);
}
</script>

You can also get the div or form first and then use querySelectorAll on it to get all the inputs, selects and textareas contained by it (not just direct children).

<div id="myDiv">
<form>
  <input type="text">
  <select>
    <option>1</option>
  </select>
  <textarea>Text...</textarea>
  <div>
  <input type="text"/>
  </div>
  <div>
   <span>
     <select id="nestedSelect">
      <option value="2">2</option>
     </select>
   </span>
  </div>
</form>
</div>
<script>
var divElem = document.getElementById("myDiv");
var inputElements = divElem.querySelectorAll("input, select, textarea");
for(let i = 0; i < inputElements.length; i++){
    console.log(inputElements[i]);
}
</script>

Upvotes: 9

Steve
Steve

Reputation: 51

[].forEach.call( document.getElementById('parentobject').querySelectorAll( 'input[type="text"], input[type="hidden"], input[type="radio"], input[type="checkbox"], select, textarea' ), function( elem ) { 
    console.log( elem.id);
} );

<div id="parentobject">
<input id="textinput" type="text" value="xyz" />
<input id="gobutton" type="button" value="go" />
<input id="acheckedbox" type="checkbox" checked />
</div>

For each element found within the specified element object (parentobject) of the types specified within the queryselectorAll filters, the specified inline function will be run with it as target, outputting the element's id to the console.

The above code applied to the following html would output the id of each matching element: 

textinput
acheckedbox

Upvotes: 0

Rick
Rick

Reputation: 4126

Use .querySelectorAll specifying each of the elements separated by a , to select from the form:

var elements = form.querySelectorAll('input, textarea, select');


var form = document.querySelector('form');
var elements = form.querySelectorAll('input, textarea, select');

elements.forEach(function(element) {
  // access each element here
  console.log(element);
});
input, textarea, select {
  display: block;
}
<form>
  <input type="text" value="name">
  <textarea>text</textarea>
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
</form>

Upvotes: 5

Related Questions