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 字符串,并输出到控制台中。