Is there a way to include manual inputs and manually selected options in the JSON object being logged from the form inputs? Currently, they are not appearing in the logged JSON object. Any suggestions on how to rectify this issue would be greatly appreciated. Thank you!
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>