---
title: "What is the FormData API in JavaScript, and how do you use it to send form data via an AJAX request?"
description: "The FormData API in JavaScript provides a way to easily construct a set of key/value pairs representing form fields and their values."
author: "Ravi Vishwakarma"
published: 2024-06-18
updated: 2024-06-18
canonical: https://www.mindstick.com/blog/304381/what-is-the-formdata-api-in-javascript-and-how-do-you-use-it-to-send-form-data-via-an-ajax-request
category: "javascript"
tags: ["web development", "javascript", "api(s)", "web api", "front-end development"]
reading_time: 4 minutes
---
# What is the FormData API in JavaScript, and how do you use it to send form data via an AJAX request?
The `FormData` API in JavaScript provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be sent using the `XMLHttpRequest` or `fetch` API. This is particularly useful for sending form data via [AJAX requests](https://www.mindstick.com/forum/157895/what-is-the-difference-between-synchronous-and-asynchronous-ajax-requests-in-mvc) without needing to manually serialize the form data.
#### Creating and Using `FormData`
To use the `FormData` API, you typically follow these steps:
1. **Create a FormData object**: You can create it from a form element or manually.
2. **Append data**: Add key/value pairs to the `FormData` object.
3. **Send data via AJAX**: Use `XMLHttpRequest` or `fetch` to send the `FormData` object.
#### Example: Using `FormData` with `fetch`
## HTML Form
```html
JavaScript Ajax Demo
Ajax Data
```
JavaScript for Handling Form Submission (`JavaScript-ajax.js`)
```javascript
document.addEventListener('DOMContentLoaded', function() {
var responseData = [];
// Load data from REST APIs
fetch('https://jsonplaceholder.typicode.com/todos', {
method: 'GET'
})
.then(response => response.json())
.then(data => {
//console.log('Success:', data);
BindDatainHtmlPage(data);
responseData = data;
})
.catch(error => {
console.error('Error:', error);
});
function BindDatainHtmlPage(data){
// Using querySelectorAll (returns a static NodeList)
const elementsToRemove = document.querySelectorAll('.todo-item');
elementsToRemove.forEach(element => element.remove());
const area = document.getElementById('dynamic-area');
for(item of data){
var html = `