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