javascript - 如何将输入字段的值获取到多个对象的数组中

Question

我有一个带有多个输入字段的表单，我需要获取该表单的值并传递到 JSON 对象中，如下所示。每个字段都将在数组中有对象。如何让所有多个字段作为对象数组传递。(表单将允许添加多个字段)

我正在使用 JavaScript 和 jQuery 获取所有值。

<div class="info">
<div class="field">
  <label> field 1 </label>
  <input placeholder="Name" class="name" type="text">
  <input placeholder="email"   class="email" type="text">
  <input placeholder="Address"  class="address" type="text">
</div>
<div class="field">
  <label> field 2</label>
  <input placeholder="Name"  class="name" type="text">
  <input placeholder="email"  class="email" type="text">
  <input placeholder="Address"  class="address" type="text">
</div>
<div class="field">
  <label> field 3 </label>
   <input placeholder="Name"  class="name" type="text">
  <input placeholder="email"   class="email" type="text">
  <input placeholder="Address"  class="address" type="text">
</div>
<div class="field">
  <label> field 4 </label>
  <input placeholder="Name"  class="name" type="text">
  <input placeholder="email"  class="email" type="text">
  <input placeholder="Address"  class="address" type="text">
</div>
</div>

单击事件将获取表单值，最终的 JSON 对象将如下所示，

{
  "info": [
    {
      "Name": "string 1",
      "email": "this",
      "Address": "that"
    },
    {
      "Name": "string 2",
      "email": "this",
      "Address": "that"
    }
  ]
}

我尝试从不同领域的每个输入中获取值(value)。

  var nameInput = document.getElementsByClassName("name"),

      names = [].map.call(nameInput, function(input) {
        return input.value;
      });

但是我如何在对象中添加电子邮件和地址字段并映射到数组中，

Answer 1

这应该有效。变量 formData 具有您想要的结构。

此代码假定键 "info" 始终相同，因此它始终在 .info 中查找。

var fieldsValues = [];

$(".info .field").each(function(index, field) {
  var fieldData = {};
  $(field).find("input").each(function(index, input) {
    fieldData[input.placeholder] = input.value;
  });

  fieldsValues.push(fieldData);
});

var formData = {info: fieldsValues};
console.log(formData);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="info">
  <div class="field">
    <label> field 1 </label>
    <input placeholder="Name" class="name" type="text" value="some name 1">
    <input placeholder="email" class="email" type="text" value="some email 1">
    <input placeholder="Address" class="address" type="text" value="some address 1">
  </div>
  <div class="field">
    <label> field 2</label>
    <input placeholder="Name" class="name" type="text">
    <input placeholder="email" class="email" type="text">
    <input placeholder="Address" class="address" type="text">
  </div>
  <div class="field">
    <label> field 3 </label>
    <input placeholder="Name" class="name" type="text">
    <input placeholder="email" class="email" type="text">
    <input placeholder="Address" class="address" type="text">
  </div>
  <div class="field">
    <label> field 4 </label>
    <input placeholder="Name" class="name" type="text">
    <input placeholder="email" class="email" type="text">
    <input placeholder="Address" class="address" type="text">
  </div>
</div>