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"
}
*/
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>
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>
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");
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);
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"
}
*/
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! 😃
