Skip to main content

formToObject

TS JS

Encode a set of form elements as an object.

Use the FormData constructor to convert the HTML form to FormData, Array.from() to convert to an array. Collect the object from the array, using Array.prototype.reduce().

typescript
interface IFormData {
new (form: any): FormData;
}

const formToObject = (form: any) => {
const F = FormData as IFormData;
Array.from(new F(form)).reduce(
(acc, [key, value]) => ({
...acc,
[key]: value,
}),
{}
);
};
<form id="form" name="form">
<div>
<label for="username">Enter name:</label>
<input type="text" id="username" name="username" />
</div>
<div>
<label for="email">Enter email:</label>
<input type="text" id="email" name="email" />
</div>
<input type="submit" value="Submit!" />
</form>
typescript
formToObject(document.querySelector("#form")); // { email: 'test@email.com', username: 'Test Name' }