Demonstrating formData to json

Demonstrating formData to json method for multi select form element.

by wilt

HTML

<form id="form">
  <label for="pet-select">Choose a pet:</label><br />
  <select name="pets" multiple id="pet-select">
    <option selected value="dog">Dog</option>
    <option selected value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
  </select>
  <br /><br />
  <button type="submit" id="submit">Save</button>
</form>

JavaScript

const submit = document.getElementById("submit");

const getFormData = () => {
  const form = document.getElementById("form");
  return new FormData(form);
}

const toJson = function(event) {
  const formData = getFormData();
  event.preventDefault();
  let object = {};
  formData.forEach((value, key) => {
    if (!Reflect.has(object, key)) {
      object[key] = value;
      return;
    }
    if (!Array.isArray(object[key])) {
      object[key] = [object[key]];
    }
    object[key].push(value);
  });
  let json = JSON.stringify(object);
  console.log(json);
};

submit.addEventListener("click", toJson);