/form-data-utils

Utilities for working with the native FormData

Primary LanguageTypeScriptMIT LicenseMIT

form-data-utils

Demo

A utility function for extracting the FormData as an object from the native <form> element, allowing more ergonomic of usage of The Platform's default form/fields usage.

Each input within your <form> should have a name attribute. (or else the <form> element doesn't know what inputs are relevant)

This will provide values for all types of controls/fields,

  • input: text, checkbox, radio, etc
  • select
    • behavior is fixed from browser default behavior, where only the most recently selected value comes through in the FormData. This fix only affects <select multiple>

Installation

npm add form-data-utils

Usage

import { dataFromEvent } from 'form-data-utils';

function handleSubmit(event) {
  event.preventDefault();

  let obj = dataFromEvent(event);
  //  ^ { name: NVP, isHuman: "", }
}

<template>
  <form onsubmit={{handleSubmit}}>
    <label>
      First Name
      <input type="text" name="firstName" value="NVP" />
    </label>
    <label> 
      Are you a human?
      <input type="checkbox" name="isHuman" value="nah" />
    </label>
  </form>
</template>

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.