beforan / js-forms

Some helpers for working with forms in Javascript

js-forms

Some helpful functions for:

• Submitting js object properties as if they were fields in an HTML form.
• Getting (some or all of) the contents of an HTML form as a JSON object
  • which could then be sent in an AJAX POST instead of a form submission
  • or used for anything else!
• Submitting an HTML form with some (or all) form fields wrapped into a JSON object in a single text field

Why is this useful?

Mainly for unorthodox client side interop with otherwise server pages, particularly when using React/Vue/Angular/KnockoutJS/whatever inside single server-loaded pages, as opposed to in an SPA context.

Imagine you have a server loaded page, with an HTML form, but you want some advanced client-side UI as part of the form.

You could write the scary frontend part in React, and then have form submissions send the React App's state object as well as the other form fields with ease.

Usage

1. npm install js-forms
2. The package provides ESM, CommonJS and UMD versions; just use it in your normal way
   • const jsForms = require("js-forms");
   • import * as jsForms from "js-forms";
   • <script src="../node_modules/js-forms/umd/js-forms.js"></script>
   • ...
3. Use the exported methods
4. ????
5. PROFIT!

Caveats

• The code uses FormData which isn't fully supported by older browsers
  • IE and Edge (Classic) are known to have issues.
  • formdata-polyfill can be used to resolve this. Just import it before using this module.

FAQ

What's aspNetCoreCsrf?

This code was originally written to be used in an ASP.NET Core project.

That framework has helpers which, when creating forms in a view, add a CSRF AntiForgery token field. That field has a name, so I stuck it in a constant in case it needs referring to.

Reference?

Right now the source is pretty simples, so look at the public exports to get the gist.

When I get some time I'll write up a reference, or else YOU can and make a PR! 😄

Examples

When I get some time I'll tidy up some usage of this from existing projects to give examples of usage.

Contribute

Yes please. Anybody dealing with the caveats above, wanting to add features, wanting to resolve issues that may be raised, etc... PLEASE MAKE PR's.

js-forms's Issues

Bring in line with UoN standards

• Break out the gulp tasks
• ES6 module syntax
• linting

samples

need (node?) and browser samples to show capability and smoke test.

keywords

for npm

travis / coveralls

• Travis
• Coveralls

uglify

Switch to npm scripts

npm scripts worked well for unit-value and would allow dropping the gulpfile / gulp dependencies.

unit tests

mocha, chai, nyc 100% pls.

README updates

i'm foolish so now code on master doesn't match the readme on master (e.g. gulp vs npm scripts)

this needs to be rectified by 1.1.0

docs

jsdoc, github pages

reconsider the polyfill dependency

should we depend on it and activate it? should we just document that we use FormData and so users will need to polyfill it for browsers that don't support it?

linting

eslint, prettier

es6 modules

just tidy up the code into modern js, since we're using babel anyway.