使用单击获取多个表单值作为对象数组答案

【问题标题】：get multiple form values as an array of object using a single click使用单击获取多个表单值作为对象数组
【发布时间】：2022-01-11 13:49:36
【问题描述】：

我在一个 div 中有多个表单。我想通过单击将每个表单的值作为对象数组获取。

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

我想得到结果，其中 exh 对象有一个名为 form 的键，其值为表单编号，另一个名为 inputdata 的键是一个对象，其键表示输入数字，值是输入值：

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

【问题讨论】：

我认为这样的输出格式更好。 [ { form: 1, inputdata: { firstname: "John", lastname: "Doe" }, }, { form: 2, inputdata: { firstname: "Jane", lastname: "Kerry", gender: "female" }, }, ];
@ikhvjs 那也会更好。你知道怎么得到这样的数组吗
使用 .map 循环遍历每个表单并在其中使用 .map 序列化表单。这是之前的几个问题，代码非常详细：serialize form data to json 和 convert form to json
@freedomn-m，对不起，我没有看到 jquery 标签。
@ikhvjs 不用担心 - 在查看 javascript 问题时，我有时会忘记我在 jquery 中不是...:)

标签： javascript jquery arrays input

【解决方案1】：

您可能可以执行以下操作：

另一种选择是序列化表单数据，然后获取表单的值，但这也可以

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>

【讨论】：

【解决方案2】：

您可以使用FormData 和Object.fromEntries 轻松获取表单数据，如下所示：

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>

【讨论】：