使用 FormData 将表单转换为对象数组

Question

我正在开发一种用户可以添加或删除朋友信息的表单。我当前的代码如下所示：(() => {  let currentCount = 0;  const theForm = document.querySelector("#theForm");  document    .querySelector("#addMoreFields")    .addEventListener("click", (event) => {      event.preventDefault();      // find and clone the template content      const template = theForm.getElementsByTagName("template")[0];      const clone = template.content.cloneNode(true);      const submitButton = document.querySelector("#submitForm");      // if the submitButton is hidden, show it      if (submitButton.offsetParent === null) {        submitButton.removeAttribute("style");      }      // add class to set and name on input fields      clone.querySelector(".set").classList.add(`set-${currentCount}`);      clone        .querySelector(".first_name")        .setAttribute("name", `firstName[${currentCount}]`);      clone        .querySelector(".middle_name")        .setAttribute("name", `middleName[${currentCount}]`);      clone        .querySelector(".last_name")        .setAttribute("name", `lastName[${currentCount}]`);      clone.querySelectorAll(".checkbox").forEach(function (item) {        item.setAttribute("name", `checkbox[${currentCount}]`);      });      clone.querySelectorAll(".radio").forEach(function (item) {        item.setAttribute("name", `radio[${currentCount}]`);      });      // remove button      clone        .querySelector(".removeSet")        .setAttribute("id", `remove-${currentCount}`);      clone        .querySelector(".removeSet")        .setAttribute("data-number", currentCount);      theForm.append(clone);      // add event listener to removeSet button      document        .querySelector(`#remove-${currentCount}`)        .addEventListener("click", (event) => {          event.preventDefault();          const setName = `.set-${event.target.getAttribute("data-number")}`;          document.querySelector(setName).remove();        });      currentCount++;    });

Answer 1

这就是我解决问题的方法。😊

我添加了评论以使其易于理解。✌

(() => {

  let currentCount = 0;

  const theForm = document.querySelector("#theForm");

  document

    .querySelector("#addMoreFields")

    .addEventListener("click", (event) => {

      event.preventDefault();

      // find and clone the template content

      const template = theForm.getElementsByTagName("template")[0];

      const clone = template.content.cloneNode(true);

      const submitButton = document.querySelector("#submitForm");

      // if the submitButton is hidden, show it

      if (submitButton.offsetParent === null) {

        submitButton.removeAttribute("style");

      }

      // add class to set and name on input fields

      clone.querySelector(".set").classList.add(`set-${currentCount}`);

      clone

        .querySelector(".first_name")

        .setAttribute("name", `firstName[${currentCount}]`);

      clone

        .querySelector(".middle_name")

        .setAttribute("name", `middleName[${currentCount}]`);

      clone

        .querySelector(".last_name")

        .setAttribute("name", `lastName[${currentCount}]`);

      clone.querySelectorAll(".checkbox").forEach(function (item) {

        item.setAttribute("name", `checkbox[${currentCount}]`);

      });

      clone.querySelectorAll(".radio").forEach(function (item) {

        item.setAttribute("name", `radio[${currentCount}]`);

      });

      clone

        .querySelector(".textarea")

        .setAttribute("name", `textarea[${currentCount}]`);

      // remove button

      clone

        .querySelector(".removeSet")

        .setAttribute("id", `remove-${currentCount}`);

      clone

        .querySelector(".removeSet")

        .setAttribute("data-number", currentCount);

      theForm.append(clone);

      // add event listener to removeSet button

      document

        .querySelector(`#remove-${currentCount}`)

        .addEventListener("click", (event) => {

          event.preventDefault();

          const setName = `.set-${event.target.getAttribute("data-number")}`;

          document.querySelector(setName).remove();

        });

      currentCount++;

    });

  theForm.addEventListener("submit", (event) => {

    event.preventDefault();

    const theArray = [];

    const theFormData = new FormData(theForm);

    // cycle through FormData keys

    for(const [key, value] of theFormData.entries()) {

    

        if (!value) {

          // do validation here

          return;

        }

      // get the key number

      const keyNumber = key.match(/\d/g).join('');

      // assign the object to theArray variable

      theArray[keyNumber] = {

        'first_name': theFormData.get(`firstName[${keyNumber}]`),

        'middle_name': theFormData.get(`middleName[${keyNumber}]`),

        'last_name': theFormData.get(`lastName[${keyNumber}]`),

        'checkbox': theFormData.getAll(`checkbox[${keyNumber}]`),

        'radio': theFormData.get(`radio[${keyNumber}]`),

        'textarea': theFormData.get(`textarea[${keyNumber}]`)

      }      

    }

    

    // clean theArray before sending to the back-end

    const filteredArray = theArray.filter(Boolean);

    console.log(filteredArray);

  });

})();

.set {

  margin: 5px;

  padding: 5px;

  outline: 1px solid #ccc;

}

.removeSet {

  float: right;

}

<form id="theForm">

  <template>

    <div class="set">

      <button class="removeSet">remove</button>

      <input class="first_name" placeholder="first name" /><br>

      <input class="middle_name" placeholder="middle name" /><br>

      <input class="last_name" placeholder="last name" /><br>

      <!-- checkbox -->

      <label><input type="checkbox" class="checkbox" value="checkbox a" />checkbox a</label>

      <label><input type="checkbox" class="checkbox" value="checkbox b" />checkbox b</label>

      <label><input type="checkbox" class="checkbox" value="checkbox c" />checkbox c</label><br>

      <!-- radio -->

      <label><input type="radio" class="radio" value="radio a" />radio a</label>

      <label><input type="radio" class="radio" value="radio b" />radio b</label>

      <label><input type="radio" class="radio" value="radio c" />radio c</label><br>

      <!-- textarea -->

      <textarea class="textarea" rows="4" cols="50">additional notes</textarea>

    </div>

  </template>

  <button id="addMoreFields">add</button>

  <button id="submitForm" style="display: none;">submit</button>

</form>