get multiple form values as an array of object using a single click

Question

I have multiple forms in a div. I would like to get the values of each form as an array of object in a single click.

<form data-category="1">
    <div class="form-group">
        <label for="usr">First Name:</label>
        <input type="text" class="form-control" id="usr" name="username" />
    </div>
    <div class="form-group">
        <label for="pwd">Last Name:</label>
        <input type="text" class="form-control" id="pwd" name="lname" />
    </div>
</form>

<form data-category="2">
    <div class="form-group">
        <label for="usr">Name:</label>
        <input type="text" class="form-control" id="usr" name="username" />
    </div>
    <div class="form-group">
        <label for="usr">Age:</label>
        <input type="number" class="form-control" id="usr" name="age" />
    </div>
    <div>
        <p>Gender></p>
        <div class="form-check">
            <label class="form-check-label">
                <input
                    type="radio"
                    class="form-check-input"
                    name="optradio"
                />Male
            </label>
        </div>
        <div class="form-check">
            <label class="form-check-label">
                <input
                    type="radio"
                    class="form-check-input"
                    name="optradio"
                />Female
            </label>
        </div>
    </div>
</form>
<button type="submit" class="btn btn-primary">Submit</button>

I would like to get the result where exh object has a key called form whose value is the form number and the another key called inputdata which is an object whose keys represnt the input numbers and value are input values:

[{
  form:1,
  inputdata:{1:"John",2:"John Doe"}
 },
 {
  form:2,
  inputdata:{1:"Jane",2:25,3:"female"}
 }]

I think an output format like this is better. `[ { form: 1, inputdata: { firstname: "John", lastname: "Doe" }, }, { form: 2, inputdata: { firstname: "Jane", lastname: "Kerry", gender: "female" }, }, ]; ` — ikhvjs, Jan 11 '22 at 13:59
@ikhvjs that would also be better. Do you know how to get the array like that — Jijo Robin, Jan 11 '22 at 14:06
Use `.map` to loop through each form and inside that, .map to serialize the forms. Here's a couple of previous questions with quite detailed code: [serialize form data to json](https://stackoverflow.com/questions/11338774/serialize-form-data-to-json) and [convert form to json](https://stackoverflow.com/questions/1184624/convert-form-data-to-javascript-object-with-jquery) — freedomn-m, Jan 11 '22 at 14:37
@ikhvjs no worries - I sometimes forget I'm *not* in jquery when looking at javascript questions... :) — freedomn-m, Jan 11 '22 at 15:39

score 0 · Answer 1 · answered Jan 11 '22 at 14:47

You can probably do the following:

One other option can be to serialize the form data and then get the value of form, but this would work as well

const form = document.querySelectorAll('form');


function submitForm() {
  const data = [];
  for(let i=0; i<form.length; i++) {
    const elements = form[i].elements;
    data.push({form: form[i].getAttribute('data-category'), inputData: {}});
    for(let j=0; j<elements.length; j++) {
      if(elements[j].type !== 'radio') {
        data[i].inputData[[elements[j].name]] = elements[j].value;
      } else {
         if(elements[j].checked) {
          data[i].inputData[[elements[j].name]] = elements[j].value;
        }
      }
    }
  }
  console.log(data);
}

<form data-category="1">
    <div class="form-group">
        <label for="usr">First Name:</label>
        <input type="text" class="form-control" id="usr" name="firstName" />
    </div>
    <div class="form-group">
        <label for="pwd">Last Name:</label>
        <input type="text" class="form-control" id="pwd" name="lastName" />
    </div>
</form>

<form data-category="2">
    <div class="form-group">
        <label for="usr">Name:</label>
        <input type="text" class="form-control" id="usr" name="firstName" />
    </div>
    <div class="form-group">
        <label for="usr">Age:</label>
        <input type="number" class="form-control" id="usr" name="age" />
    </div>
    <div>
        <p>Gender></p>
        <div class="form-check">
            <label class="form-check-label">
                <input
                    type="radio"
                    class="form-check-input"
                    name="gender"
                    value="M"
                />Male
            </label>
        </div>
        <div class="form-check">
            <label class="form-check-label">
                <input
                    type="radio"
                    class="form-check-input"
                    name="gender"
                    valeu="F"
                />Female
            </label>
        </div>
    </div>
</form>
<button type="submit" class="btn btn-primary" onclick="submitForm()">Submit</button>

ikhvjs · Answer 2 · 2022-01-11T15:54:14.983

You may use FormData and Object.fromEntries to get the form data easily like below:

const btn = document.querySelector("#submit");

btn.addEventListener("click", () => {
    const forms = document.querySelectorAll("form");
    const output = [];
    forms.forEach(form => {
        output.push({
            form: form.dataset.category,
            inputData: Object.fromEntries(new FormData(form)),
        });
    });

    console.log(output);
});

<!DOCTYPE html>
<html lang="en">
    <head> </head>
    <body>
        <form data-category="1">
            <div class="form-group">
                <label for="usr">First Name:</label>
                <input
                    type="text"
                    class="form-control"
                    id="usr"
                    name="username"
                />
            </div>
            <div class="form-group">
                <label for="pwd">Last Name:</label>
                <input type="text" class="form-control" id="pwd" name="lname" />
            </div>
        </form>

        <form data-category="2">
            <div class="form-group">
                <label for="usr">Name:</label>
                <input
                    type="text"
                    class="form-control"
                    id="usr"
                    name="username"
                />
            </div>
            <div class="form-group">
                <label for="usr">Age:</label>
                <input type="number" class="form-control" id="usr" name="age" />
            </div>
            <div>
                <p>Gender</p>
                <div class="form-check">
                    <label class="form-check-label">
                        <input
                            type="radio"
                            class="form-check-input"
                            name="gender"
                            value="1"
                        />Male
                    </label>
                </div>
                <div class="form-check">
                    <label class="form-check-label">
                        <input
                            type="radio"
                            class="form-check-input"
                            name="gender"
                            value="0"
                        />Female
                    </label>
                </div>
            </div>
        </form>

        <button id="submit" type="button" class="btn btn-primary">
            Submit
        </button>
    </body>
</html>

get multiple form values as an array of object using a single click

2 Answers2