forn v1.3.1

🍞 Forn

Parse the form data into a plain object for either Javascript or React:

import handle from 'forn';

// React version - logs "{ hello: 'world' }" if submitted like this
export default () => (
  <form onSubmit={handle(data => console.log(data))}>
    <input name="hello" defaultValue="world" />
    <button>Send</button>
  </form>
);

// JQuery version - also logs "{ hello: 'world' }" when submitted
$('form').submit(handle(data => console.log(data)));

// Plain Javascript version - logs "{ hello: 'world' }" when submitted
document.querySelector('form').addEventListener('submit', handle(data => {
  console.log(data);
}));

To work with <input type="file"> you'll need to switch to receiving FormData instead of a plain object. To do this, add an enctype="multipart/form-data" to the <form> element:

<!-- HTML form definition to use FormData -->
<form enctype="multipart/form-data">
  <input name="name" placeholder="Your Name">
  <input name="email" placeholder="Email" type="email">
  <textarea name="message" placeholder="Message"></textarea>
  <button>Send</button>
</form>

import handle from 'forn';

// React form definition to use FormData. Note it's 'encType' and not 'enctype'
export default () => (
  <form encType="multipart/form-data" onSubmit={handle(formdata => { ... })}>
    <input name="hello" placeholder="world">
    <input name="file" type="email">
    <button>Send</button>
  </form>
);