How can I get an array of element form values with javascript?

let elems = Array.from(document.querySelectorAll("#shape_layout input[value]")
           , el => el.value);

The other answers are good but lacked an explanation of what was happening which I disliked.

Your current code is document.getElementById("shape_layout").elements; which is an array-like-object. Let's first write a function that takes an item as an argument and returns the new item that should replace the old one.

function(oldItem){
  return oldItem.value;
}

this can be rewritten using arrow notation as oldItem => oldItem.value.

As guest271314 mentioned we can create a new array that also applies a function to every element, like so

Array.from(listLikeObject, function_to_use);

Let's plug our data in,

Array.from(document.querySelectorAll("#shape_layout input[value]"), el => el.value).

Trouble is, this isn't compatible with Internet Explorer because

• Arrow functions aren't supported
• Array.from is not supported

A basic for loop would probably be most compatible here. It is the approach taken in Ionut's answer.

var theArray = []
for(var i = 0; i < document.querySelectorAll("#shape_layout input[value]").length; i++){
  theArray.push(document.querySelectorAll("#shape_layout input[value]")[i]);
}

I'm now going to break this down line-by-line.

theArray is an array that will store the output. var theArray = []; sets it up as an empty array.

for(var i = 0; i < document.querySelectorAll("#shape_layout input[value]").length; i++) this can be broken into three parts.

• var i = 0; sets i to 0 at the very start.
• i < document.querySelectorAll("#shape_layout input[value]").length is the condition that must be satisfied every iteration of the loop. This condition makes sure that there is a list item with the index i, and if there is not then it will exit out of the loop.
• i++ is a shorthand for i = i + 1 and makes i 1 bigger than it was before. This happens at the end of each iteration of the loop, just before the condition is checked.

thisArray.push will append to the end of the array.

document.querySelectorAll("#shape_layout input[value]")[i] is index notation to take the ith item in the array.

You can do it with a simple for loop and push():

var elements = document.querySelectorAll("#shape_layout input[type=text]");
  var arr = [];
  for (var i = 0; i < elements.length; i++) {
    if (typeof elements[i].value !== "undefined") {
        arr.push(elements[i].value);
      }
    }

  console.log(arr);

<form id="shape_layout">
    Color: <br/>
    <input type="text" name="background" id="background" value="red" /> <br/>
    <br/> Height(px): <br/>
    <input type="text" name="height" id="height" value="100px" /> <br/>
    <br/> Width(px): <br/>
    <input type="text" name="width" id="width" value="100px" /> <br/>
</form>

Straightforward approach:

arr=[];

form=document.getElementById('shape_layout');
inputs=form.querySelectorAll('input');
for(i=0;i<inputs.length;i++) {
arr.push(inputs[i].value);
}
console.log(arr);

Waiting for some extra one-liner. :)

Sexier™, nice example from MDN:

inputs=document.querySelectorAll('#shape_layout input[type=text]');
vals=Array.prototype.map.call(inputs , function(el){
return el.value;
})
console.log(vals);