Javascript loop through multiple forms, get all input values

问题

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>

final result should be object:

"profile":[
{
   "name":"Joe",
   "name2":"Doe",
   "address":"1st Maint Street",
},
{
    "name":"Mary",
    "name2":"Doe",
    "address":"2nd Maint Street",
 },

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

回答1:

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

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>

回答2:

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>

回答3:

• querySelectorAll (mdn) can be used to fetch the forms and inputs.
• flatMap (mdn) can be used to map forms to inputs.
• spread syntax [...iterable] (mdn) can be used to convert the node list returned by querySelectorAll to an array.

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>

回答4:

you can try like below

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" />

回答5:

You could add a callback, dispatch and listen an event, or do a polling to when a new form is added, then loop through the forms using the forms container selector.

Example

const forms = document.querySelector("#formMain form");
if (forms.length) {
    forms.forEach(form, () => {
        // Do somthing here
    }
}

来源：https://stackoverflow.com/questions/55797261/javascript-loop-through-multiple-forms-get-all-input-values