DEV Community

loading...
Cover image for How to easily convert HTML form tag input values to an object in JavaScript?

How to easily convert HTML form tag input values to an object in JavaScript?

MELVIN GEORGE
Hi, I'm Melvin George, A web developer, and a blogger.
Originally published at melvingeorge.me ・3 min read

Originally posted here!

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

// 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"
    }

*/
Enter fullscreen mode Exit fullscreen mode

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,

<!-- Simple Form Tag with some inputs -->
<form>
  <input type="text" name="firstName" />
  <input type="text" name="lastName" />
</form>
Enter fullscreen mode Exit fullscreen mode

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,

<!-- Simple Form Tag with some inputs -->
<form id="myForm">
  <input type="text" name="firstName" />
  <input type="text" name="lastName" />
</form>
Enter fullscreen mode Exit fullscreen mode

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

// Get reference to the form element
const myForm = document.getElementById("myForm");
Enter fullscreen mode Exit fullscreen mode

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

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

// Intialise FormData constructor with myForm
const formData = new FormData(myForm);
Enter fullscreen mode Exit fullscreen mode

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 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,

// 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"
    }

*/
Enter fullscreen mode Exit fullscreen mode

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.

That's all! 😃

Feel free to share if you found this useful 😃.


Discussion (0)