JavaScript - 迭代表单输入并将值收集为对象中的键值对

Question

我试图通过迭代输入然后将它们作为键/值对存储在对象数组中来从表单中的多个输入字段收集值。但是，我正在努力寻找一种不涉及长集合 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、名称或自定义数据属性)动态设置键值。

Answer 1

为每个输入字段添加一个唯一的 id(为您的对象提供一个键)。

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

现在将 id 保存为键，将值保存为值:

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

现在您可以进一步扩展该函数，以便它处理数组值等。