add formToObject
This commit is contained in:
25
snippets/formToObject.md
Normal file
25
snippets/formToObject.md
Normal file
@ -0,0 +1,25 @@
|
||||
### formToObject
|
||||
|
||||
Serializes a form into an object.
|
||||
|
||||
First we transform the `form` into `FormData`, then we convert it into an `array` and from the `array` we collect an `object`
|
||||
|
||||
```js
|
||||
const formToObject = form =>
|
||||
Array.from(new FormData(form))
|
||||
.reduce((acc, [key, value]) => ({
|
||||
...acc,
|
||||
[key]: value,
|
||||
}), {})
|
||||
```
|
||||
|
||||
```html
|
||||
<form id="form">
|
||||
<input name="email" type="email" />
|
||||
<input name="name" />
|
||||
</form>
|
||||
```
|
||||
|
||||
```js
|
||||
formToObject(document.querySelector('#form')) // { email: 'test@email.com', name: 'Test Name' }
|
||||
```
|
||||
@ -2,15 +2,11 @@
|
||||
|
||||
Serializes a form into an object.
|
||||
|
||||
First we transform the `form` into `FormData`, then we convert it into an `array` and from the `array` we collect an `object`
|
||||
First we transform the `form` into `FormData`, then we convert it into an `array` and from the `array` we collect an `query string`
|
||||
|
||||
```js
|
||||
const serializeForm = form =>
|
||||
Array.from(new FormData(form))
|
||||
.reduce((acc, [key, value]) => ({
|
||||
...acc,
|
||||
[key]: value,
|
||||
}), {})
|
||||
Array.from(new FormData(form), field => field.map(encodeURIComponent).join('=')).join('&')
|
||||
```
|
||||
|
||||
```html
|
||||
@ -21,5 +17,5 @@ const serializeForm = form =>
|
||||
```
|
||||
|
||||
```js
|
||||
serializeForm(document.querySelector('#form')) // { email: 'test@email.com', name: 'Test Name' }
|
||||
serializeForm(document.querySelector('#form')) // email=test%40email.com&name=Test%20Name
|
||||
```
|
||||
@ -90,6 +90,7 @@ flattenObject:object,recursion,intermediate
|
||||
flip:adapter,function,intermediate
|
||||
forEachRight:array,function,intermediate
|
||||
formatDuration:date,math,string,utility,intermediate
|
||||
formToObject:browser,utility,object
|
||||
forOwn:object,intermediate
|
||||
forOwnRight:object,intermediate
|
||||
fromCamelCase:string,intermediate
|
||||
@ -264,7 +265,7 @@ sampleSize:array,random,intermediate
|
||||
scrollToTop:browser,intermediate
|
||||
sdbm:math,utility,intermediate
|
||||
serializeCookie:utility,string,intermediate
|
||||
serializeForm:browser,beginner,utility
|
||||
serializeForm:browser,beginner,utility,string
|
||||
setStyle:browser,beginner
|
||||
shallowClone:object,beginner
|
||||
shank:array,intermediate
|
||||
|
||||
Reference in New Issue
Block a user