Returning form data in console after form submission

June 28, 2023

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?

>Solution :

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>