Forms are part of almost all of the apps we build. Even a static app has some input fields to get some data from users. Now, there are some situations when we have a lot of input fields of type text, email, checkbox, radio, select, etc. in a single page/form. Just like the below image...

What can we do to get all the values of those input fields at once at the time of form submission? Well, I was previously following a very costly brute force approach because I wasn't aware of a simple hack that Forms provide us.

PS: I was creating variables for each input field and storing their values separately. (Such a noob dev I am)

So, if you don't want to make mistake I did and learn a better approach to extract data then follow this blog.

What is that hack???

"FormData". Actually, it is not a hack but it is a widely used and recommended approach to work efficiently with forms. FormData helps to create a set of key-value pairs of inputs fields and their values respectively. You might have seen in some APIs where data encoding type is set to formdata so that we can directly pass the set of key-value pairs in an HttpRequest.

How does it work?

First, create a form and put some input fields inside it. Also, put a button with type submit in the form.

<form name="myform">
    <input type="text" placeholder="Name" name="name" />
    <input type="email" placeholder="Email" name="email" />

    <button type="submit">Submit</button>
</form>

One important note to take here is, we have to provide a unique "name" to each and every input field inside the form. Because these names are going to be our keys for the form data.

To perform some action on form submission we create a simple function that takes the event object as a parameter and passes it to the onSubmit property of the form element.

...
const onSubmit = (event) => {};

<form name="myform" onSubmit={onSubmit}>
...

Now, this event object is our main hero. It contains several properties including the values we need. Console log the event object on submit to view more details/props of that event. event object has a property named target which points to the form element where the submit event was triggered. To extract values from the event.target, we have to convert it to an object of type FormData. See the snippet below.

const formData = new FormData(event.target);

Now, we have access to all the key-value pairs of input fields of the form in the formData object.

Listing all the data

With the help of entries() method, we can iterate over the formData object to get all the key-values listed.

for (let [key, value] of formData.entries()) {
            console.log(key, value);
}

Here the key will be the name property we passed to the input field

Extracting a specific field value

If you want to extract the value of a specific input field then, it can be done without converting the event.target object to FormData. See the example below.

console.log(event.target.name.value);

Syntax: event.taget.NAME_OF_YOUR_INPUT_FIELD.value

There is also a method called get() in the FormData object to extract the value of a specific field.

console.log(formData.get('name'));

get() method returns the value of the first occurred input field with the specified key

We can also programmatically add new key-value pairs to the FormData object. This is helpful when we are dealing with HTTP Requests.

Final words

Try the example here

You can find more about FormData here.

If you find something wrong in this blog then please do let me know in the comments.

Want to connect with me or know about me? Click here