Я пытаюсь собрать значения из нескольких полей ввода в форме путем итерации входных данных, а затем сохранить их в виде пар ключ / значение в массиве объектов. Однако я изо всех сил пытаюсь найти эффективный способ сделать это, не требующий длинного набора if if else или оператора switch.

< Сильный > Концепция :

<form>
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
</form>

Чего я хотел бы избежать:

var inputs = document.querySelectorAll('input');    

for (var i = 0; i < inputs.length; i++) {
  var myObject = {};

  if (i = 0) {
    myObject.val0 = inputs[i];
  } else if (i = 1) {
    myObject.val1 = inputs[i];
  } else if (i = 2) {
    myObject.val2 = inputs[i];
  } else if (i = 3) {
    myObject.val3 = inputs[i];
  } 

}

Любые предложения о том, как это можно сделать более эффективно? Одна идея, которую я имею, заключается в использовании скобочной нотации для динамической установки значений ключей на основе существующего атрибута html-элемента, например, id, name или пользовательского атрибута данных.

2
Frederick M. Rogers 26 Фев 2018 в 23:19

9 ответов

Лучший ответ

Добавьте уникальный id в каждое поле ввода (чтобы дать ему ключ для вашего объекта).

<form>
  <input id="firstName" type="text">
  <input id="lastName" type="text">
  <input id="email" type="email">
  <input id="number" type="text">
</form>

Теперь сохраните идентификатор в качестве ключа, а значение в качестве значения:

var inputs = document.querySelectorAll('input');    
var myObject = {};

for (var i = 0; i < inputs.length; i++) {
  myObject[inputs[i].id] = inputs[i].value;
}

console.log(myObject) // {firstName: "", lastName: "", email: "", number: ""}

Преврати все это в функцию, которая делает это по форме:

function getFormValues(formId) {
    var inputs = document.querySelectorAll('#' + formId + ' input');    
    var formValues = {};

    for (var i = 0; i < inputs.length; i++) {
      formValues[inputs[i].id] = inputs[i].value;
    }

    return formValues;
}

Все вместе:

<form id="registerForm">
  <input id="firstName" type="text">
  <input id="lastName" type="text">
  <input id="email" type="email">
  <input id="number" type="text">
</form>

getFormValues('registerForm'); // {firstName: "", lastName: "", email: "", number: ""}

Теперь вы можете расширить функцию, чтобы она обрабатывала значения массива и т. Д.

2
Lansana Camara 26 Фев 2018 в 20:23

< Сильный > Резюме Похоже, вы хотите заполнить массив значений Это должно ответить на ваш вопрос, если я правильно понял

var inputs = document.getElementsByTagName('input'),
    object = [];

function setValues() {
    for (var i = 0; i < inputs.length; i++) {
        object.push("val" + i + ": " + inputs[i].value );
    }
    console.log(object);
}

document.addEventListener("DOMContentLoaded", setValues(), false);
<form onchange="setValues()">
  <input type="text" value="test">
  <input type="text"  value="test22">
  <input type="text"  value="test333">
  <input type="text" value="test444">
</form>
1
DataCure 26 Фев 2018 в 20:41

Зацикливайтесь на своих элементах и динамически используйте индекс:

a[`val${i}`] = e.value;
document.querySelector('button').addEventListener('click', function(e) {
  e.preventDefault();
  
  var inputs   = document.querySelectorAll('input'),
      myObject = Array.from(inputs).reduce(function(a, e, i) {
                    a[`val${i}`] = e.value;
                    return a;
                 }, {});
                 
  console.log(myObject)
});
<form>
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <button>Click me!</button>
</form>
1
Ele 26 Фев 2018 в 20:30

Вы можете использовать обозначение в скобках как средство доступа к свойствам для объекта и getElementsByTagName для получения элементов ввода.

var inputs = document.getElementsByTagName('input'),
    object = {};

function setValues() {
    for (var i = 0; i < inputs.length; i++) {
        object['val' + i] = inputs[i].value;
    }
    console.log(object);
}
<form onchange="setValues()">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
</form>
1
Nina Scholz 26 Фев 2018 в 20:25

Это именно то, что Array.reduce () функция была создана для:

document.querySelector('button').addEventListener('click', function(e) {
  var inputs = document.querySelectorAll('input');    

  var obj = [].reduce.call(inputs, (accumulator, currentValue, currentIndex) => {
    accumulator[`val${currentIndex}`] = currentValue.value
    return accumulator
  }, {})
  
  console.log(obj)
});
<form>
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <button>Go</button>
</form>
1
bmceldowney 26 Фев 2018 в 20:39

Я бы написал так, используя Array.prototype. Foreach ( ) :

const inputs = document.querySelectorAll('input')
const myObject = {}

inputs.forEach((element, index) => myObject[`val${index}`] = element)
1
Francisco Mateo 26 Фев 2018 в 20:25

Вы можете сделать это в одном выражении:

var myObject = Object.assign(...
    Array.from(document.getElementsByTagName('input'), (inp, i) => ({ ['val'+i]: inp }))
);

Если вы хотите получить значения из входных данных (как вы говорите в тексте), то вам нужно inp.value вместо inp справа от выражения или с деструктуризацией assingment :

var myObject = Object.assign(...Array.from(
    document.getElementsByTagName('input'), ({value}, i) => ({ ['val'+i]: value })
));

console.log(myObject);
<input value="hello">
<input value="world">
1
trincot 26 Фев 2018 в 20:35

Прежде всего, вы должны объявить переменную вне цикла for, иначе вы в конечном итоге будете объявлять каждый раз при запуске цикла for.

Кроме того, вы можете использовать скобочные обозначения вместо точечных обозначений, чтобы достичь этого, как вы сказали.

var myObject = {};
for (var i = 0; i < inputs.length; i++) {
  myObject["val"+i] = inputs[i];
}
1
void 26 Фев 2018 в 20:23

Переберите поля ввода. Что-то вроде этого может быть:

    let inputList = document.getElementsByTagName('input');
    let val = 'val';

    for (let x in inputList){
       let name = val + x;
       myObj.`${name}`= inputList[x].value;
       number++;
    }

Просто один из многих вариантов.

1
Alejandro G. 26 Фев 2018 в 20:30