Merge pull request #934 from dimensi/master

add serializeForm snippet

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' }
+```

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
+```

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

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 = `
+    <form id="form">
+      <input name="name" value="Test Name" />
+      <input name="email" value="test@mail.com" />
+    </form>
+  `;
+
+  const form = document.querySelector('#form');
+  expect(formToObject(form)).toEqual({ name: 'Test Name', email: 'test@mail.com' });
+});

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 = `
+    <form id="form">
+      <input name="name" value="Test Name" />
+      <input name="email" value="test@mail.com" />
+    </form>
+  `;
+
+  const form = document.querySelector('#form');
+  expect(serializeForm(form)).toBe('name=Test%20Name&email=test%40mail.com');
+});