Form Collect

Collects form data in the same way specified by WHATWG; this data should be the same as the data that would get submitted to the server by a plain form submission.

This means you can gracefully degrade your js form submission, knowing the front and back end will recieve the same data sets.

How to use

npm install form-collect

const collect = require('form-collect');

// This is the form you want to collect data from
const form = document.querySelector('#my-form');
// Optional; this is the button that was clicked to submit the form
const submitter = document.querySelector('#submit-button');

const data = collect(form, submitter);

The data object that is returned is an array of entries, each entry being a two-element array, of key/name and value. This is because the form may have multiple inputs with the same name, creating mutliple entries with the same key, and this is the most generic way of handling such a case in Javascript.

An example for form with one text input called text_input and two checkboxes both with the name checkbox[]. Of course field naming convention is totally up to you; the brackets on the end are optional.

[
  ["text_input", "input value"],
  ["checkbox[]", "checked_value_1"],
  ["checkbox[]", "checked_value_2"],
]

It's not hard to get data from this structure:

const matchKey = key => ([k]) => k === key;

const get = (data, key) => (data.find(matchKey(key)) || [])[1];
const getAll = (data, key) => data.filter(matchKey(key));
const has = (data, key) => data.some(matchKey(key));
const entries = data => data[Symbol.iterator]();
const keys = data => data.map([k] => k)[Symbol.iterator]();
const values = data => data.map([,v] => v)[Symbol.iterator]();
const append = (data, key, value) => {
  data.push(key, value);
};
const del = (data, key) => {
  let ix;
  while(ix = data.findIndex(matchKey(key)), ix > -1)
    data.splice(ix, 1);
};
const set = (data, key) => {
  del(data, key);
  append(data, key, value);
};

Maybe simpler still, create a FormData object:

const formData = data.reduce((fd, e) => (fd.append(...e), fd), new FormData());

Known issues

I need to double check to make sure it's rigorous, but for certain I know that image input don't capture your mouse coördinates currently. Instead it submits (0,0) as the x and y values.