Estoy tratando de recopilar valores de varios campos de entrada en un formulario iterando las entradas y luego almacenándolas como pares clave / valor en una matriz de objetos. Sin embargo, estoy luchando por encontrar una manera eficiente de hacer esto que no implique un conjunto largo si es que si no, o cambiar la declaración.

Concepto:

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

Lo que me gustaría evitar:

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];
  } 

}

¿Alguna sugerencia sobre cómo hacer esto de manera más eficiente? Una idea que tengo es usar la notación de corchetes para establecer dinámicamente los valores clave en función de un atributo de elemento html existente, tal vez id, nombre o un atributo de datos personalizado.

2
Frederick M. Rogers 26 feb. 2018 a las 23:19

9 respuestas

La mejor respuesta

Agregue un id único a cada campo de entrada (para darle una clave para su objeto).

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

Ahora guarde la identificación como la clave y el valor como el valor:

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: ""}

Conviértalo todo en una función que lo haga por la forma:

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

Todos juntos:

<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: ""}

Ahora puede ampliar aún más la función para que maneje los valores de la matriz, etc.

2
Lansana Camara 26 feb. 2018 a las 20:23

Resumen Parece que quieres llenar una matriz de valores Esto debería responder a su pregunta si lo entendí bien

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 feb. 2018 a las 20:41

Recorre tus elementos y utiliza dinámicamente el índice:

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 feb. 2018 a las 20:30

Puede usar la notación de corchetes como propiedad accessor para el objeto y getElementsByTagName para obtener los elementos de entrada.

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 feb. 2018 a las 20:25

Esto es específicamente lo que Array.reduce () la función se realizó para:

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 feb. 2018 a las 20:39

Escribiría así usando Array.prototype. forEach ():

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

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

Puedes hacerlo en una sola expresión:

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

Si desea los valores de las entradas (como dice en el texto), entonces necesita inp.value en lugar de inp en el lado derecho de la expresión, o con desestructuración evaluación:

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 feb. 2018 a las 20:35

En primer lugar, debe declarar la variable fuera del ciclo for o, de lo contrario, terminará declarando cada vez que se ejecute el ciclo for.

Además, puede usar la notación de corchetes en lugar de la notación de puntos para lograr esto como ha dicho.

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

Recorre los campos de entrada. Tal vez algo como esto:

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

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

Solo una de muchas opciones.

1
Alejandro G. 26 feb. 2018 a las 20:30