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?

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?

• javascript
• html
• css
• forms

• Ah I did not know querySelectorAll method could have multiple parameters Thank you. – Qwerty Qwerts Commented Jul 31, 2018 at 17:34
• If you have only div among those form elements you can use :not(), e.g. element.querySelectorAll('*:not(div)') – Asons Commented Jul 31, 2018 at 17:36
• @QwertyQwerts querySelectorAll find all children/descendants within e.g. in your case a form – Asons Commented Jul 31, 2018 at 17:41

3 Answers 3

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>

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>

[].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