Get list of all input objects using JavaScript, without accessing a form object

by

(See update at end of answer.)

You can get a NodeList of all of the input elements via getElementsByTagName (DOM specification, MDC, MSDN), then simply loop through it:

var inputs, index;

inputs = document.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
}

There I’ve used it on the document, which will search the entire document. It also exists on individual elements (DOM specification), allowing you to search only their descendants rather than the whole document, e.g.:

var container, inputs, index;

// Get the container element
container = document.getElementById('container');

// Find its child `input` elements
inputs = container.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
}

…but you’ve said you don’t want to use the parent form, so the first example is more applicable to your question (the second is just there for completeness, in case someone else finding this answer needs to know).

Update: getElementsByTagName is an absolutely fine way to do the above, but what if you want to do something slightly more complicated, like just finding all of the checkboxes instead of all of the input elements?

That’s where the useful querySelectorAll comes in: It lets us get a list of elements that match any CSS selector we want. So for our checkboxes example:

var checkboxes = document.querySelectorAll("input[type=checkbox]");

You can also use it at the element level. For instance, if we have a div element in our element variable, we can find all of the spans with the class foo that are inside that div like this:

var fooSpans = element.querySelectorAll("span.foo");

querySelectorAll and its cousin querySelector (which just finds the first matching element instead of giving you a list) are supported by all modern browsers, and also IE8.

More Related Contents:

  1. how to view the answer of a js function in a html input? [duplicate]
  2. Java script on focus instead of onclick
  3. Set the value of an input field
  4. Can I hide the HTML5 number input’s spin box?
  5. How to get the raw value an field?
  6. onchange event on input type=range is not triggering in firefox while dragging
  7. How to get current formatted date dd/mm/yyyy in Javascript and append it to an input [duplicate]
  8. How do you get the cursor position in a textarea?
  9. HTML input type=”number” still returning a string when accessed from javascript
  10. Remove a FileList item from a multiple “input:file”
  11. HTML5 restricting input characters
  12. Putting default value in
  13. Why can’t I get the input from the input box?
  14. How to get text of an input text box during onKeyPress?
  15. Change HTML form ‘input’ type by JavaScript
  16. Check if input is number or letter javascript
  17. Delete default value of an input text on click
  18. Set the default value of an input field
  19. html() vs innerHTML jquery/javascript & XSS attacks
  20. New Webkits convert decimal comma to ~ dot and vice versa in number-type inputs. Javascript name of that browser feature?
  21. Disable spaces in Input, AND allow back arrow?
  22. HTML form input tag name element array with JavaScript
  23. javascript change element from another page
  24. Load php function onClick [closed]
  25. How to pass parameters using ui-sref in ui-router to controller
  26. Prevent zoom cross-browser
  27. Attach a body onload event with JS
  28. Detect if dropdown navigation would go off screen and reposition it
  29. Converting sanitised html back to displayable html
  30. Creating a Clickable Grid in a Web Browser

Leave a Comment