I am writing a form, and when this form is to be submitted, I want the resulting object of the form data to be printed in the console. I have tried to achieve this, but the console does not show the form data.
// get form element
const formElement = document.querySelector('form#event_form')
// convert the form to JSON
const getFormJSON = (form) => {
const data = new FormData(form);
return Array.from(data.keys()).reduce((result, key) => {
result[key] = data.get(key);
return result;
}, {});
};
// handle the form submission event, prevent default form behaviour, check validity, convert form to JSON
const handler = (event) => {
event.preventDefault();
const valid = formElement.reportValidity();
if (valid) {
const result = getFormJSON(formElement);
console.log(result)
}
}
formElement.addEventListener("submit", handler)
<form name="event_form" id="event_form">
<label for="event_summary">Event Summary:</label>
<br>
<input id="event_summary" type="text">
<br>
<br>
<label for="event_location">Event Location:</label>
<br>
<input id="event_location" type="text">
<br>
<br>
<label for="event_description">Event Description:</label>
<br>
<input id="event_description" type="text">
<br>
<br>
<label for="start_time">Start Time:</label>
<br>
<input id="start_time" type="datetime-local">
<br>
<br>
<label for="end_time">End Time:</label>
<br>
<input id="end_time" type="datetime-local">
<br>
<br>
<button type="submit">Submit</button>
</form>
In the console, I do not see the form object logged. Is there a problem in my code?
When using FormData
each input field needs a name
, or it won't be included in the submission.
// get form element
const formElement = document.querySelector('form#event_form')
// convert the form to JSON
const getFormJSON = (form) => {
const data = new FormData(form);
return Array.from(data.keys()).reduce((result, key) => {
result[key] = data.get(key);
return result;
}, {});
};
// handle the form submission event, prevent default form behaviour, check validity, convert form to JSON
const handler = (event) => {
event.preventDefault();
const valid = formElement.reportValidity();
if (valid) {
const result = getFormJSON(formElement);
console.log(result)
}
}
formElement.addEventListener("submit", handler)
<form name="event_form" id="event_form">
<label for="event_summary">Event Summary:</label>
<br>
<input id="event_summary" name="event_summary" type="text">
<br>
<br>
<label for="event_location">Event Location:</label>
<br>
<input id="event_location" name="event_location" type="text">
<br>
<br>
<label for="event_description">Event Description:</label>
<br>
<input id="event_description" name="event_description" type="text">
<br>
<br>
<label for="start_time">Start Time:</label>
<br>
<input id="start_time" name="start_time" type="datetime-local">
<br>
<br>
<label for="end_time">End Time:</label>
<br>
<input id="end_time" name="end_time" type="datetime-local">
<br>
<br>
<button type="submit">Submit</button>
</form>