Javascript querySelectorAll get multiple values from multiple inputs

Question

I am making a website and I want to use multiple inputs

<input type="text" class="foo" value="foo">
<input type="text" class="foo" value="foo">
<input type="text" class="foo" value="foo">
...

<button onclick="function()">Send</button>

In the Javascript I am using a querySelectorAll to get the values in a array

function function() {
   document.querySelectorAll('.foo').value;
}

This only work for me when I don’t use a value but then I get the full element and not the value..

Thanks :)

`document.querySelectorAll('.foo')` will return nodeList. So `document.querySelectorAll('.foo').value` is undefined. — Sankar, May 16 '17 at 09:03
@Quentin none of the answers in the duplicate question specifically address qSA and its returned `NodeList`. — Alnitak, May 16 '17 at 09:35
@Alnitak — The context makes it clear that all the methods mentioned in the question work in the same way. — Quentin, May 16 '17 at 09:37

Alnitak · Accepted Answer · 2017-05-17T10:41:10.023

7

document.querySelectorAll() returns a (non-live) NodeList, not an array. Fortunately it is possible to call the array methods on pseudo-arrays:

function getValues(selector) {
    var els = document.querySelectorAll(selector);
    return [].map.call(els, el => el.value);
}

edited May 17 '17 at 10:41

answered May 16 '17 at 09:07

Alnitak

334,560
70
407
495

Sankar · Answer 2 · 2017-05-16T09:36:01.707

1

document.querySelectorAll('.foo') will return nodeList. So your code will return undefined.

one of the way, you can get array of values.

function func() {
  var a = document.querySelectorAll('.foo');
  var b = [];
  for(var i = 0; i <= a.length-1; i++){
    b.push(a[i].value);
  }
  console.log(b);
}

<input type="text" class="foo" value="foo">
<input type="text" class="foo" value="foo">
<input type="text" class="foo" value="foo">

<button onclick="func()">Send</button>

edited May 16 '17 at 09:36

answered May 16 '17 at 09:10

Sankar

6,908
2
30
53

`.forEach` combined with `push` is a classic anti-pattern (notwithstanding that the `NodeList` interface does offer `.forEach` but doesn't directly support `.map`) – Alnitak May 16 '17 at 09:11
@Alnitak can you explain sorry, i don't understand – Sankar May 16 '17 at 09:16
The canonical way to take an array of something and pass every element through a mutating function, returning a new array of the results is `Array.prototype.map` – Alnitak May 16 '17 at 09:33
@Alnitak Got it. thanks – Sankar May 16 '17 at 09:35
@KadenSkinner, you are trying to check if two array is equal, so this might help - `JSON.stringify(b)==JSON.stringify(["", "foo", "foo"]);` – Sankar May 03 '21 at 18:54

score 0 · Answer 3 · answered May 16 '17 at 09:07

You need to access the values individually. Here is your updated code as an example:

function myfunc() {
   var myElementArray = document.querySelectorAll('.foo');

     var myOutputText = "";
     for(var i=0;i< myElementArray.length; i++){
            myOutputText += myElementArray[i].value + " | ";
    }

    alert(myOutputText);
}

Here is the JSFiddle demo

score -1 · Answer 4 · answered May 16 '17 at 09:21

-1

With ES6, to get an array of values you can try this

Array.from(document.querySelectorAll('.foo')).map(x => x.value)

answered May 16 '17 at 09:21

Tai Dinh

33
2
7

I considered doing that in my own answer, but it unnecessarily creates a whole new array only to throw it away again. Using `[].map.call` avoids that step. – Alnitak May 16 '17 at 09:32

Javascript querySelectorAll get multiple values from multiple inputs

4 Answers4