如何获取输入字段的值为多个对象的数组

Question

我有一个具有多个输入字段的表单，我需要获取该表单的值并传入JSON对象，如下所示。每个字段在数组中都有对象。我如何获得所有多个字段作为Array of Object传递（表单将允许添加多个字段）

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

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

但我怎么添加电子邮件和地址字段对象，并映射到阵列，

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