我有一个带有多个输入字段的表单,我需要获取该表单的值并将其传递给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"
    }
  ]
}


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

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

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


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

最佳答案

这应该工作。变量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>

10-05 21:04
查看更多