Save user form input data in a JavaScript object

Last updated: October 4, 2022.

Saving form input data to a JavaScript object can be easier than you might think!

You can do it in just two lines of code.

Creating a form

For this method, you need to make sure that all your inputs are embedded in a <form> element. Also, each input element needs to have a name attribute.

So your form might look something like this:

<form>
  <div>
    <label for="first-name">First name</label>
    <input type="text" name="first-name">
  </div>
  <div>
    <label for="last-name">Last name</label>
    <input type="text" name="last-name">
  </div>
  <div>
    <label for="JS-difficult">How difficult is JavaScript?</label>
    <select name="JS-difficulty">
      <option>Easy</option>
      <option>Somewhere between</option>
      <option>Hard</option>
    </select>
  </div>
    <button type="submit">Submit</button>
</form>

Now, select the form in JavaScript and add an event listener to the form listening out for a submit event on it. This event is triggered by the button of type submit in the form.

Make sure to begin the handling of the form inside the function fired by the submit event by calling the preventDefault() method on the event object. This prevents the default HTML behavior of refreshing the page.

const form = document.querySelector('form');

form.addEventListener('submit', (e) => {
  e.preventDefault(); // Prevent HTML refresh
  // Handle form with JavaScript here
});

Now, for the form handling.

Form handling with JavaScript

Preparing a payload with FormData()

First, pass the selected form element into the FormData constructor object. The FormData constructor prepares the form data payload for you.

You create a new instance of a FormData object by preceding the constructor with the new operator when calling it:

const form = document.querySelector('form');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const formData = new FormData(form); // Converts form to payload (array of arrays)
});

The user input data is now stored in the variable formData. The form data is stored in an array of arrays and can be retrieved from formData by applying an iterative methods to it, such as a loop.

The first item in each nested array is the name value given to an input in the form. And the second is the user response value.

Array of arrays to object with Object.fromEntries()

But you don’t actually need to write a loop because the native Object.fromEntries() method is designed for this purpose: converting an array of arrays into a JavaScript object.

When applying Object.fromEntries(), the first value in each nested array becomes the property key and the second the value:

const form = document.querySelector('form');

form.addEventListener('submit', (e) => {
  e.preventDefault(); // Prevent HTML refresh
  const formData = new FormData(form); // Converts to array of arrays
  const obj = Object.fromEntries(formData); // Array of arrays to object
});

Entering some example data, the output of obj looks like this:

{
    "first-name": "James",
    "last-name": "West",
    "JS-difficulty": "Somewhere between"
}

From here, you may want to pass the JavaScript object into JSON.stringify() to be able to send it in JSON format to a server or store it in in a user's local storage so it is available to retrieve in future pages.

---