Javascript通过多种形式循环，获取所有输入值 [英] Javascript loop through multiple forms, get all input values

问题描述

我需要在不使用jQuery的情况下从多种形式的输入值构建对象.

I need to build an object from multiple forms input values without using 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中嵌入多个表单.

The forms can be added dynamically by user, so I can have multiple forms embedded in the main form div.

我能够获得第一个表格的值，但是当添加多个表格时，我陷入了困境，我试图遍历主要元素，但无法正常工作.上面是我的第一个代码示例.

I´m able to get the the first form values, but I´m getting stuck when multiple forms are added, I trying to loop throough the main element but just not working. The above is my 1st code sample working.

var formdata = document.getElementById('formMain').getElementsByTagName('input')
var form = [].map.call(formdata, function( input ) {
    return {'value':input.value};
});

推荐答案

看看这个-使用querySelectorAll，forEach和push.

Have a look at this - using querySelectorAll, forEach and push.

或者，只要回调返回创建的对象，则为Array.map.HTML元素集合需要转换为Array才能使用map

Alternatively Array.map as long as the callback returns the objects created. the HTML element collection needs to be cast to an Array to use 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>

这篇关于Javascript通过多种形式循环，获取所有输入值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！