如何使用 vanilla JS 在 JSON 对象中记录表单输入？答案

【问题标题】：How to log form inputs in a JSON object with vanilla JS?如何使用 vanilla JS 在 JSON 对象中记录表单输入？
【发布时间】：2020-03-09 20:23:48
【问题描述】：

我想用表单输入记录一个 JSON 对象。目前记录的 JSON 对象不包括手动输入和手动选择的选项。

您能否就如何解决这个问题提出建议？谢谢！

let kitForm = document.querySelector("#kitForm"),
  formData = new FormData(kitForm),
  submitButton = document.querySelector("#submitButton");

function onSubmit(e) {
  e.preventDefault();

  let jsonObject = {};

  for (const [key, value] of formData) {
    jsonObject[key] = value;
  }
  console.log(JSON.stringify(jsonObject));
}

submitButton.addEventListener("click", onSubmit);

<form id="kitForm">

  <label for="kitName">Kit name:</label>
  <input id="kitName" type="text" name="kitName">

  <label for="applicationName">Application:</label>
  <select id="applicationName" type="text" name="applicationName">
    <option>Application 1</option>
    <option>Application 2</option>
  </select>

  <label for="tradeName">Trade:</label>
  <select id="tradeName" type="text" name="tradeName">
    <option>Value 1</option>
    <option>Value 2</option>
  </select>

  <label for="description">Description:</label>
  <input id="description" type="text" name="description">

  <input id="submitButton" type="submit" value="Submit">
</form>

【问题讨论】：

JavaScript - Getting HTML form values 的重复 - 不知道为什么会被投票。只需使用搜索人员。

标签： javascript json

【解决方案1】：

使用表单数组序列化器。

这是一个例子：

let kitForm = document.querySelector("#kitForm"),
  formData = new FormData(kitForm),
  submitButton = document.querySelector("#submitButton");

function onSubmit(e) {
  e.preventDefault();
  console.log(serializeArray(kitForm));
}

submitButton.addEventListener("click", onSubmit);


function serializeArray(form) {
    var serialized = [];
    for (var i = 0; i < form.elements.length; i++) {
        var field = form.elements[i];
        if (!field.name || field.disabled || field.type === 'file' || field.type === 'reset' || field.type === 'submit' || field.type === 'button') continue;
        if (field.type === 'select-multiple') {
            for (var n = 0; n < field.options.length; n++) {
                if (!field.options[n].selected) continue;
                serialized.push({
                    name: field.name,
                    value: field.options[n].value
                });
            }
        }
        else if ((field.type !== 'checkbox' && field.type !== 'radio') || field.checked) {
            serialized.push({
                name: field.name,
                value: field.value
            });
        }
    }

    return serialized;
};

<form id="kitForm">

      <label for="kitName">Kit name:</label>
      <input id="kitName" type="text" name="kitName">

      <label for="applicationName">Application:</label>
      <select id="applicationName" type="text" name="applicationName">
        <option>Application 1</option>
        <option>Application 2</option>
      </select>

      <label for="tradeName">Trade:</label>
      <select id="tradeName" type="text" name="tradeName">
        <option>Value 1</option>
        <option>Value 2</option>
      </select>

      <label for="description">Description:</label>
      <input id="description" type="text" name="description">

    <input id="submitButton" type="submit" value="Submit">
</form>

函数来源：https://vanillajstoolkit.com/helpers/serializearray/

【讨论】：

【解决方案2】：

您可以尝试在提交函数中移动您的 formData 声明。

【讨论】：