How to easily convert HTML form tag input values to an object in JavaScript?
Tags: javascript
Published: 2021-05-06 00:00:00

---
  title: How to easily convert HTML form tag input values to an object in JavaScript?
  published: true
  tags: JavaScript
  date: Thu May 06 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/convert-html-form-tag-input-values-to-object-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-5521978447305362d11fda195f9c958c.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/convert-html-form-tag-input-values-to-object-javascript)
  
To convert the input values from an HTML `form` tag to an object, you can use the `FormData()` constructor available in the global `window` object in JavaScript.

### TL;DR

```js
// Get reference to the form element
const myForm = document.getElementById("myForm");

// Intialise FormData constructor with myForm
const formData = new FormData(myForm);

// Using formData.entries() and Object.fromEntries() method
// to convert the form data into a valid javascript object
const formDataObject = Object.fromEntries(formData.entries());

console.log(formDataObject);

/*
OUTPUT
------

    {
        firstName: "John"
        lastName: "Doe"
    }

*/
```

For example, let's say you have a HTML `form` tag in which you have some input fields to get the data from from the user. In our case, let's say the first input receives the user's first name and the second receives the last name of the user. So the HTML would look like this,

```html
<!-- Simple Form Tag with some inputs -->
<form>
  <input type="text" name="firstName" />
  <input type="text" name="lastName" />
</form>
```

As you can see from the above code that we have attached a `name` attribute to both the `input` tags with the value of `firstName` and `lastName`.

**These are required attributes to differentiate the input values when we start using the `FormData()` constructor. The `name` attribute will act as the key when we convert the form data to an object later.**

After that, let's also add an `id` to the `form` tag so that we can reference it in JavaScript. It can be done like this,

```html
<!-- Simple Form Tag with some inputs -->
<form id="myForm">
  <input type="text" name="firstName" />
  <input type="text" name="lastName" />
</form>
```

Now let's get a reference to the `form` element tag in JavaScript using the `document.getElementById()` method like this,

```js
// Get reference to the form element
const myForm = document.getElementById("myForm");
```

Now we need to get initialise the `FormData()` constructor by passing the `myForm` as an argument to the constructor like this,

```js
// Get reference to the form element
const myForm = document.getElementById("myForm");

// Intialise FormData constructor with myForm
const formData = new FormData(myForm);
```

So now to get data from the `form` tag inputs we can use the `entries()` method available in the `formData` object. This will give us an [Iterable Object](https://melvingeorge.me/blog/iterable-objects-javascript) in JavaScript which we can loop through using the `next()` method. But here we don't have to use any of those we can just use the `Object.fromEntries()` method and pass our `Iterable` object which will essentially make it into an object. It can be done like this,

```js
// Get reference to the form element
const myForm = document.getElementById("myForm");

// Intialise FormData constructor with myForm
const formData = new FormData(myForm);

// Using formData.entries() and Object.fromEntries() method
// to convert the form data into a valid javascript object
const formDataObject = Object.fromEntries(formData.entries());

console.log(formDataObject);

/*
OUTPUT
------

    {
        firstName: "John"
        lastName: "Doe"
    }

*/
```

As you can see from the above code, the key of the object is the `input` tag's `name` attribute and the value is the value user types into the `input` element.

We have successfully converted the `form` input values into a valid JavaScript object.

See the above code live in [JSBin](https://jsbin.com/lenibucuru/3/edit?html,js,console,output).

That's all! 😃

### Feel free to share if you found this useful 😃.

---