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

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

• javascript
• html
• getelementbyid

4 Answers 4

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>

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

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