如何用香草JS在JSON对象中记录表单输入

Question

我想用表单输入记录一个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>

Answer 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/

Answer 2

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