JS 把form表单的值转为json

HTML:

<form id="myForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <button type="button" id="convertBtn">Convert to JSON</button>
</form>

JavaScript:

document.getElementById('convertBtn').addEventListener('click', function() {
  const form = document.getElementById('myForm');
  const formData = new FormData(form);
  const jsonData = {};

  for (const [key, value] of formData.entries()) {
    jsonData[key] = value;
  }

  const jsonResult = JSON.stringify(jsonData);
  console.log(jsonResult);
});

 我们修改了表单中的 name 属性，使用了 row[name1] 和 row[email]。在 JavaScript 中，我们遍历表单数据时，需要去除键名中的 "row[" 和 "]"，然后将其作为 JSON 对象的键名。这样就可以得到所需的 JSON 数据，其中键名保留为 name1 和 email

for (const [key, value] of formData.entries()) {
                    const formattedKey = key.replace('row[', '').replace(']', '');
                    jsonData[formattedKey] = value;
                }

在这个例子中，我们首先获取到自定义按钮的元素（通过 getElementById），然后添加了一个点击事件监听器。当按钮被点击时，我们获取表单的数据并将其转换为 JSON 格式。

这里我们使用了 JSON.stringify 方法将包含表单数据的对象转换成 JSON 字符串，并输出到控制台中。