diff --git a/snippets/formToObject.md b/snippets/formToObject.md new file mode 100644 index 000000000..6f1d5ae4c --- /dev/null +++ b/snippets/formToObject.md @@ -0,0 +1,19 @@ +### formToObject + +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()`. + +```js +const formToObject = form => + Array.from(new FormData(form)) + .reduce((acc, [key, value]) => ({ + ...acc, + [key]: value, + }), {}) +``` + +```js +formToObject(document.querySelector('#form')) // { email: 'test@email.com', name: 'Test Name' } +``` diff --git a/snippets/serializeForm.md b/snippets/serializeForm.md new file mode 100644 index 000000000..36d8e13f3 --- /dev/null +++ b/snippets/serializeForm.md @@ -0,0 +1,16 @@ +### serializeForm + +Encode a set of form elements as a query string. + +Use the `FormData` constructor to convert the HTML `form` to `FormData`, `Array.from()` to convert to an array, passing a map function as the second argument. +Use `Array.prototype.map()` and `window.encodeURIComponent()` to encode each field's value. +Use `Array.prototype.join()` with appropriate argumens to produce an appropriate query string. + +```js +const serializeForm = form => + Array.from(new FormData(form), field => field.map(encodeURIComponent).join('=')).join('&') +``` + +```js +serializeForm(document.querySelector('#form')) // email=test%40email.com&name=Test%20Name +``` diff --git a/tag_database b/tag_database index a1938487c..304a2441c 100644 --- a/tag_database +++ b/tag_database @@ -91,6 +91,7 @@ flattenObject:object,recursion,intermediate flip:adapter,function,intermediate forEachRight:array,function,intermediate formatDuration:date,math,string,utility,intermediate +formToObject:browser,object,intermediate forOwn:object,intermediate forOwnRight:object,intermediate fromCamelCase:string,intermediate @@ -265,6 +266,7 @@ sampleSize:array,random,intermediate scrollToTop:browser,intermediate sdbm:math,utility,intermediate serializeCookie:utility,string,intermediate +serializeForm:browser,string,intermediate setStyle:browser,beginner shallowClone:object,beginner shank:array,intermediate diff --git a/test/formToObject.test.js b/test/formToObject.test.js new file mode 100644 index 000000000..b8511f324 --- /dev/null +++ b/test/formToObject.test.js @@ -0,0 +1,18 @@ +const expect = require('expect'); +const {formToObject} = require('./_30s.js'); + +test('formToObject is a Function', () => { + expect(formToObject).toBeInstanceOf(Function); +}); + +test('formToObject correctly converts to object', () => { + document.body.innerHTML = ` +
+ `; + + const form = document.querySelector('#form'); + expect(formToObject(form)).toEqual({ name: 'Test Name', email: 'test@mail.com' }); +}); diff --git a/test/serializeForm.test.js b/test/serializeForm.test.js new file mode 100644 index 000000000..a09a851df --- /dev/null +++ b/test/serializeForm.test.js @@ -0,0 +1,18 @@ +const expect = require('expect'); +const {serializeForm} = require('./_30s.js'); + +test('serializeForm is a Function', () => { + expect(serializeForm).toBeInstanceOf(Function); +}); + +test('serializeForm correctly converts to query string', () => { + document.body.innerHTML = ` + + `; + + const form = document.querySelector('#form'); + expect(serializeForm(form)).toBe('name=Test%20Name&email=test%40mail.com'); +});