我需要从多个表单输入值构建一个对象而不使用jQuery。
<div id="formMain">
<form id="form_id_1" class="formClass">
<div id="fullname">
<p>Full Name</p>
<input type="text" class="inputClass" name="name" value="Joe">
<br/>
<input type="text" class="inputClass" name="name2" value="Doe">
</div>
<div id="Address">
<p>Address</p>
<input type="text" class="inputClass" name="address" value="1st Maint Street">
</div>
</form>
<form id="form_id_2" class="formClass">
<div id="fullname">
<p>Full Name</p>
<input type="text" class="inputClass" name="name" id="name1" value="Mary">
<br/>
<input type="text" class="inputClass" name="name2" id="name2" value="Doe">
</div>
<div id="Address">
<p>Address</p>
<input type="text" class="inputClass" name="address" id="addressId" value="2nd Maint Street">
</div>
</form>
</div>
最终结果应该是对象:
"profile":[
{
"name":"Joe",
"name2":"Doe",
"address":"1st Maint Street",
},
{
"name":"Mary",
"name2":"Doe",
"address":"2nd Maint Street",
},
表单可以由用户动态添加,因此我可以在主表单div中嵌入多个表单。
我能够得到第一个表单值,但是当我添加多个表单时,我会陷入困境,我试图循环主要元素,但只是不工作。以上是我的第一个代码示例工作。
var formdata = document.getElementById('formMain').getElementsByTagName('input')
var form = [].map.call(formdata, function( input ) {
return {'value':input.value};
});
看看这个 - 使用querySelectorAll,forEach和push。
或者Array.map,只要回调返回创建的对象。需要将HTML元素集合强制转换为Array才能使用map
console.log("Using forEach on the HTML collection")
let profile = [];
document.querySelectorAll("form").forEach(f => {
let obj = {};
f.querySelectorAll("input").forEach(ele => obj[ele.name] = ele.value || "");
profile.push(obj)
})
console.log(profile)
// ---------------------------------------------------------------
console.log("Using Array.map on a HTML collection cast to Array")
profile = [...document.querySelectorAll("form")].map(f => {
let obj = {};
f.querySelectorAll("input").forEach(ele => obj[ele.name] = ele.value || "");
return obj;
})
console.log(profile)
<div id="formMain">
<form id="form_id_1" class="formClass">
<div id="fullname">
<p>Full Name</p>
<input type="text" class="inputClass" name="name" value="Joe">
<br/>
<input type="text" class="inputClass" name="name2" value="Doe">
</div>
<div id="Address">
<p>Address</p>
<input type="text" class="inputClass" name="address" value="1st Maint Street">
</div>
</form>
<form id="form_id_2" class="formClass">
<div id="fullname">
<p>Full Name</p>
<input type="text" class="inputClass" name="name" id="name1" value="Mary">
<br/>
<input type="text" class="inputClass" name="name2" id="name2" value="Doe">
</div>
<div id="Address">
<p>Address</p>
<input type="text" class="inputClass" name="address" id="addressId" value="2nd Maint Street">
</div>
</form>
</div>
var forms = document.querySelectorAll("form");
var result = Array.from(forms).map(a => {
var obj = {};
Array.from(a.querySelectorAll("[name]")).forEach(b => {
obj[b.getAttribute("name")] = b.value;
});
return obj;
});
console.log(result);
<div id="formMain">
<form id="form_id_1" class="formClass">
<div id="fullname">
<p>Full Name</p>
<input type="text" class="inputClass" name="name" value="Joe">
<br/>
<input type="text" class="inputClass" name="name2" value="Doe">
</div>
<div id="Address">
<p>Address</p>
<input type="text" class="inputClass" name="address" value="1st Maint Street">
</div>
</form>
<form id="form_id_2" class="formClass">
<div id="fullname">
<p>Full Name</p>
<input type="text" class="inputClass" name="name" id="name1" value="Mary">
<br/>
<input type="text" class="inputClass" name="name2" id="name2" value="Doe">
</div>
<div id="Address">
<p>Address</p>
<input type="text" class="inputClass" name="address" id="addressId" value="2nd Maint Street">
</div>
</form>
</div>
querySelectorAll
(mdn)可用于获取表单和输入。flatMap
(mdn)可用于将表格映射到输入。[...iterable]
(mdn)可用于将querySelectorAll
返回的节点列表转换为数组。let inputs = [...document.querySelectorAll('form')].flatMap(a => [...a.querySelectorAll('input')]);
console.log(inputs);
<div id="formMain">
<form id="form_id_1" class="formClass">
<div id="fullname">
<p>Full Name</p>
<input type="text" class="inputClass" name="name" value="Joe">
<br/>
<input type="text" class="inputClass" name="name2" value="Doe">
</div>
<div id="Address">
<p>Address</p>
<input type="text" class="inputClass" name="address" value="1st Maint Street">
</div>
</form>
<form id="form_id_2" class="formClass">
<div id="fullname">
<p>Full Name</p>
<input type="text" class="inputClass" name="name" id="name1" value="Mary">
<br/>
<input type="text" class="inputClass" name="name2" id="name2" value="Doe">
</div>
<div id="Address">
<p>Address</p>
<input type="text" class="inputClass" name="address" id="addressId" value="2nd Maint Street">
</div>
</form>
</div>
你可以尝试如下
var formMain = document.getElementById("formMain");
var formMresultAreaain = document.getElementById("resultArea");
var result = [];
var formData = '<form class="formClass">' +
'<div id="fullname">' +
'<p>Full Name</p>' +
'<input type="text" class="inputClass" name="name" value="Joe">' +
'<br/>' +
'<input type="text" class="inputClass" name="name2" value="Doe">' +
'</div>' +
'<div id="Address">' +
'<p>Address</p>' +
'<input type="text" class="inputClass" name="address" value="1st Maint Street">' +
'</div>' +
'</form>';
function addForm() {
formMain.innerHTML += formData;
}
function submitForms() {
var forms = document.getElementsByTagName("form");
var inputs;
var tempResult = {};
result = [];
for (var i = 0; i < forms.length; i++) {
inputs = forms[i].getElementsByTagName("input");
tempResult = {};
for (var j = 0; j < inputs.length; j++)
tempResult[inputs[j].name] = inputs[j].value;
result.push(tempResult);
}
console.log(result);
}
<input type="button" onclick="addForm()" value="Add Form" />
<div id="formMain">
</div>
<hr/>
<input type="button" onclick="submitForms()" value="Submit" />
您可以添加回调,调度和侦听事件,或者在添加新表单时进行轮询,然后使用表单容器选择器遍历表单。
例
const forms = document.querySelector("#formMain form");
if (forms.length) {
forms.forEach(form, () => {
// Do somthing here
}
}