如何在控制台中显示我的表单中的数据？

Question

我有一个包含几个输入的表单。当我单击提交按钮时，我想在控制台中以 json 格式显示输入的值（包括字段的名称）。

我该怎么做？我读到了新的 FormData 方式，但我真的不明白如何使用它（到目前为止我已经想出了这段代码，但它不起作用）

//popup is my form

popup.addEventListener("submit", function (event) {
	let formData = new FormData(popup);
	console.log(formData);
  event.preventDefault();
}, false);

Answer 1

如果您想获取表单中的所有数据（包括名称），并且您不打算使用 jQuery，您可以尝试根据表单自己处理输入：

const form = document.myForm;

form.addEventListener("submit", function(event) {
  event.preventDefault(); // Always preventDefault() first
  let formData = new FormData(this);
  let object = {};
  formData.forEach((value, key) => {
    object[key] = value
  });
  let json = JSON.stringify(object);
  console.log(json);
}, false);

<form name="myForm">
  <input name="input1">
  <input name="input2">
  <input name="input3">
  <button>Submit</button>
</form>