When working with forms, it can be tempting to pull in an external library to manage the data.
But what if I told you that there is an easy way to do this natively in the browser ?
That’s with the help of <code class="language-">FormData
</code> API!
What is great about FormData ?
<ul>
<li>
It’s natively supported by modern browsers
</li>
<li>
It integrates well with HTML forms
</li>
<li>
It supports many types like files, text, dates, urls, colors out of the box
</li>
</ul>
<h2 id="examples"><a href="#examples" aria-hidden="true" tabindex="-1"></a>Examples</h2>
<h3 id="create-new-formdata"><a href="#create-new-formdata" aria-hidden="true" tabindex="-1"></a>Create new FormData</h3>
<div class="remark-highlight"><pre class="language-ts line-numbers"><code>const formData = new FormData();
</code></pre></div>
References:
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData" target="_blank" rel="nofollow noopener noreferrer">MDN - FormData</a></li>
</ul>
<h3 id="set-values"><a href="#set-values" aria-hidden="true" tabindex="-1"></a>Set values</h3>
Simple key pairs:
<div class="remark-highlight"><pre class="language-ts line-numbers"><code>formData.set('name', 'Garfield');
formData.set('color', 'Orange');
</code></pre></div>
Array values:
<div class="remark-highlight"><pre class="language-ts line-numbers"><code>const hobbies = [
 'Sleeping',
 'Eating Lasagna',
 'Biking'
];

hobbies
 .forEach((hobby, index) =&gt; formData.append(`hobbies[${index}]`, hobby));
</code></pre></div>
References:
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData/set" target="_blank" rel="nofollow noopener noreferrer">MDN - FormData.set</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData/append" target="_blank" rel="nofollow noopener noreferrer">MDN - FormData.append</a></li>
</ul>
<blockquote class="common">
💡 Note:
There is subtle difference between <code class="language-">append
</code> and <code class="language-">set
</code>, <code class="language-">set
</code> will override all values, whereas, <code class="language-">append
</code> will
add on additional values with the same key (even if the key exists already).
</blockquote>
<h3 id="get-values"><a href="#get-values" aria-hidden="true" tabindex="-1"></a>Get values</h3>
Simple key pairs:
<div class="remark-highlight"><pre class="language-ts line-numbers"><code>formData.get('name');
// =&gt; 'Garfield'

formData.get('color');
// =&gt; 'Orange'
</code></pre></div>
Array values:
<div class="remark-highlight"><pre class="language-ts line-numbers"><code>formData.get('hobbies[0]');
// =&gt; 'Sleeping'

formData.get('hobbies[1]');
// =&gt; 'Eating Lasagna'

formData.get('hobbies[2]');
// =&gt; 'Biking'
</code></pre></div>
References:
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData/get" target="_blank" rel="nofollow noopener noreferrer">MDN - FormData.get</a></li>
</ul>
<h3 id="delete-values"><a href="#delete-values" aria-hidden="true" tabindex="-1"></a>Delete Values</h3>
<div class="remark-highlight"><pre class="language-ts line-numbers"><code>formData.delete('hobbies[2]');
</code></pre></div>
References:
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData/delete" target="_blank" rel="nofollow noopener noreferrer">MDN - FormData.delete</a></li>
</ul>
<h3 id="check-if-value-exists"><a href="#check-if-value-exists" aria-hidden="true" tabindex="-1"></a>Check If value exists</h3>
<div class="remark-highlight"><pre class="language-ts line-numbers"><code>formData.has('hobbies[2]');
// =&gt; false

if (formData.has('name')) {
 // validate or perform some pre-submit action
}
</code></pre></div>
References:
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData/has" target="_blank" rel="nofollow noopener noreferrer">MDN - FormData.has</a></li>
</ul>
<h3 id="get-form-keys-form-field-names"><a href="#get-form-keys-form-field-names" aria-hidden="true" tabindex="-1"></a>Get form keys (form field names)</h3>
<div class="remark-highlight"><pre class="language-ts line-numbers"><code>// iterator approach
for (let formField of formData.keys()) {
 console.log(`field: "${formField}"`);
}

// =&gt; field: "name"
// =&gt; field: "color"
// =&gt; field: "hobbies[0]"
// =&gt; field: "hobbies[1]"

// Convert to Array 
console.log(Array.from(formFields.keys()));

// =&gt; ['name', 'color', 'hobbies[0]', 'hobbies[1]'] 
</code></pre></div>
References:
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData/keys" target="_blank" rel="nofollow noopener noreferrer">MDN - FormData.keys</a></li>
</ul>
<h3 id="get-form-values-form-field-values"><a href="#get-form-values-form-field-values" aria-hidden="true" tabindex="-1"></a>Get form values (form field values)</h3>
<div class="remark-highlight"><pre class="language-ts line-numbers"><code>// iterator approach
for (let formField of formData.values()) {
 console.log(`value: "${formValue}"`);
}

// =&gt; value: "Garfield"
// =&gt; value: "Orange"
// =&gt; value: "Sleeping"
// =&gt; value: "Eating Lasagna"

// Convert to Array 
console.log(Array.from(formFields.values()));

// =&gt; ['Garfield', 'Orange', 'Sleeping', 'Eating Lasagna'] 
</code></pre></div>
References:
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData/values" target="_blank" rel="nofollow noopener noreferrer">MDN - FormData.values</a></li>
</ul>
<h3 id="get-form-entries-form-field-names-and-values"><a href="#get-form-entries-form-field-names-and-values" aria-hidden="true" tabindex="-1"></a>Get form entries (form field names and values)</h3>
<div class="remark-highlight"><pre class="language-ts line-numbers"><code>// iterator approach
for (let [formField, formValue] of formData.entries()) {
 console.log(`"${formField}" : "${formValue}"`);
}

// =&gt; "name" : "Garfield"
// =&gt; "color" : "Orange"
// =&gt; "hobbies[0]" : "Sleeping"
// =&gt; "hobbies[1]" : "Eating Lasagna"

</code></pre></div>
References:
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData/entries" target="_blank" rel="nofollow noopener noreferrer">MDN - FormData.entries</a></li>
</ul>
And... that’s it!
If you like this post be sure to share it with someone you know!

Jerry Chang

BYTE-Sized

Digestable Content That Will Take You To The Next Level

Form: Getting To Know FormData