How to log form inputs in a JSON object with vanilla JS?

user_9077492 0
Viewed 442

I would like to log a JSON object with the form inputs. Currently the logged JSON object does not include manual inputs and manually selected options.

Could you please advise on how to fix that? Thanks! 

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>

json javascript
2 Answers

Use a form array serializer.

Here is an example:

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>

function source: https://vanillajstoolkit.com/helpers/serializearray/

user_62426130

You may try to move your formData declaration inside your submit function.

user_120840880
Related