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>

在click事件中将获得表单值，最终的JSON对象将如下所示，

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

我试图从不同领域的每个输入中获取价值。

  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>

Answer 2

尝试这样的事情：

    var result = {"info":[]};
    $(".info .field").each(function () {
        var info = {};
        $(this).children("input").each(function () {
            eval("info." + $(this).attr("placeholder") + "='" + $(this).val()+"'");
        });
        result.info.push(info);
    });

如何将输入字段的值输入到多个Object的数组中

2 个答案: