Как я могу получить массив значений формы элемента с помощью javascript?

Question

<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> 

Это моя форма, и я бы хотел, чтобы в javascript хранились «значения по умолчанию».

Что-то вроде:

document.getElementById("shape_layout").elements; 
>>> this gives me [input#background, input#height, input#width] 
but I would like it to give me the default values: 
>>> ["red","100px","100px"] 

Answer 1

Вы можете сделать это с помощью простого for петли и 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>

Answer 2

прямолинейный подход:

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); 

Ожидание некоторых дополнительных однострочных. :)

Sexier ™, хороший пример из MDN:

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

Answer 3

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

Answer 4

Другие ответы хороши, но не хватало объяснения , что творилось, которую я не любил.

Ваш текущий код document.getElementById("shape_layout").elements;, который является массивом-подобным объектом. Давайте сначала напишем функцию, которая принимает элемент как аргумент и возвращает новый элемент, который должен заменить старый.

function(oldItem){ 
    return oldItem.value; 
} 

это можно переписать, используя стрелки обозначения, как oldItem => oldItem.value.

Как guest271314 упоминалось, мы можем создать новый массив, который также применяет функцию к каждому элементу, как и

Array.from(listLikeObject, function_to_use);

Давайте затыкать данные,

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

Беда в том, что это не совместимо с Internet Explorer, так как

• функции стрелки не поддерживаются
• Array.from не поддерживается

Основной for цикл, вероятно, будет наиболее совместимым Вот. Это подход, принятый в ответе Ionut.

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

Теперь я собираюсь сломать это по очереди.

theArray - массив, который будет хранить выход. var theArray = []; устанавливает его как пустой массив.

for(var i = 0; i < document.querySelectorAll("#shape_layout input[value]").length; i++) его можно разбить на три части.

• var i = 0; наборы i к 0 в самом начале.
• i < document.querySelectorAll("#shape_layout input[value]").length - это условие, которое должно выполняться каждую итерацию цикла. Это условие гарантирует, что есть элемент списка с индексом i, а если нет, то он выйдет из цикла.
• i++ является сокращением на i = i + 1 и составляет i 1 больше, чем было раньше. Это происходит в конце каждой итерации цикла, как раз перед проверкой состояния.

thisArray.push будет добавлен в конец массива.

document.querySelectorAll("#shape_layout input[value]")[i] - обозначение индекса, чтобы взять i-й элемент в массиве.