Javascript循环遍历多个表单，获取所有输入值

Question

我需要在不使用 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};
});

Answer 1

看看这个 - 使用 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>