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

Question

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>

Duplicate of [JavaScript - Getting HTML form values](https://stackoverflow.com/questions/3547035/javascript-getting-html-form-values) - no idea why this getting upvoted. just use the search guys. — rx2347, Mar 09 '20 at 20:35

score 4 · Accepted Answer · answered Mar 09 '20 at 20:32

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/

score 0 · Answer 2 · answered Mar 09 '20 at 20:36

0

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

answered Mar 09 '20 at 20:36

HatemSat

76
2

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

2 Answers2