 Sam Thorogood [X](https://twitter.com/samthor) [GitHub](https://github.com/samthor) [Homepage](https://whistlr.info/)
`FormData` is the XHR user's best friend, and it's getting an upgrade in Chrome 50.
We're adding methods allowing you to inspect your `FormData` objects or modify them after-the-fact.
You can now use `get()`, `delete()`, and iteration helpers like `entries`, `keys`, and more. ([Check out the full list](https://developer.mozilla.org/docs/Web/API/FormData).)
If you're not already using FormData, it's a simple, [well-supported](http://caniuse.com/#feat=xhr2) API that allows you to programmatically build a virtual form and send it to a far away place using `window.fetch()` or `XMLHttpRequest.send(formData)`.
For some examples, read on!
## Parse real forms like a pro
`FormData` can be constructed from a real HTML form, taking a snapshot of all its current values.
However, the object used to be entirely opaque. All you could do was send it on, unchanged, to a server.
Now, you can take it, modify it, bop it, observe it, shrink it, change it, and finally, upload it:
```javascript
function sendRequest(theFormElement) {
var formData = new FormData(theFormElement);
formData.delete("secret_user_data"); // don't include this one!
if (formData.has("include_favorite_color")) {
formData.set("color", userPrefs.getColor());
}
// log all values like
console.info("User selected widgets", formData.getAll("widget"));
window.fetch(url, {method: 'POST', body: formData});
}
```
You can also send `FormData` via the older `XMLHttpRequest`:
```javascript
var x = new XMLHttpRequest();
x.open('POST', url);
x.send(formData);
```
## Don't throw away your FormData
If you're building your own `FormData` from scratch, you might have found it frustrating that you couldn't reuse it - you've spent a lot of time on those fields!
As both the `window.fetch()` and `XMLHttpRequest.send()` methods takes a snapshot of the `FormData`, you can now safely reuse and modify your work!
Check this example out:
```javascript
// append allows multiple values for the same key
var formData = new FormData();
formData.append("article", "id-123");
formData.append("article", "id-42");
// send like request
formData.set("action", "like");
window.fetch(url, {method: 'POST', body: formData});
// send reshare request
formData.set("action", "reshare"); // overrides previous "action"
window.fetch(url, {method: 'POST', body: formData});
```