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

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 >
        <label for="usr">First Name:</label>
        <input type="text"  id="usr" name="username" />
    </div>
    <div >
        <label for="pwd">Last Name:</label>
        <input type="text"  id="pwd" name="lname" />
    </div>
</form>

<form data-category="2">
    <div >
        <label for="usr">Name:</label>
        <input type="text"  id="usr" name="username" />
    </div>
    <div >
        <label for="usr">Age:</label>
        <input type="number"  id="usr" name="age" />
    </div>
    <div>
        <p>Gender></p>
        <div >
            <label >
                <input
                    type="radio"
                    
                    name="optradio"
                />Male
            </label>
        </div>
        <div >
            <label >
                <input
                    type="radio"
                    
                    name="optradio"
                />Female
            </label>
        </div>
    </div>
</form>
<button type="submit" >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"}
 }]

CodePudding user response：

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 >
        <label for="usr">First Name:</label>
        <input type="text"  id="usr" name="firstName" />
    </div>
    <div >
        <label for="pwd">Last Name:</label>
        <input type="text"  id="pwd" name="lastName" />
    </div>
</form>

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

CodePudding user response：

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 => {
        const formData = new FormData(form);
        const obj = Object.fromEntries(formData);
        output.push({
            form: form.dataset.category,
            inputData: obj,
        });
    });

    console.log(output);
});

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

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

        <button id="submit" type="button" >
            Submit
        </button>
    </body>
</html>