🌹 getFormFields

getFormFields: Gives you the fields of a form element. getFormFields uses FormData and returns a plain object.

Installation

npm i @sharyn/browser.getformfields
# or
yarn add @sharyn/browser.getformfields

You can alternatively install the @sharyn/browser package, or the entire sharyn library.

Arguments

formElement (HTMLFormElement): The HTML form element.

[onlyTruthy=false] (boolean): Falsy fields (like '') are omitted if true.

Returns

object: The plain object of the form data.

Example

const Form = () => {
  const form = useRef(null)
  return (
    <>
      <form ref={form}>
        <input name="firstname" />
        <input name="lastname" />
      </form>
      <button onClick={() => console.log(getFormFields(form.current))}>
        Log all form values
      </button>
      <button onClick={() => console.log(getFormFields(form.current, true))}>
        Log truthy form values
      </button>
    </>
  )
}

If firstname is Stan and lastname is left empty:

getFormFields(form.current)       // { firstname: 'Stan', lastname: '' }
getFormFields(form.current, true) // { firstname: 'Stan' }

Imports

Depending on the package you are using, you can import or require getFormFields in the following ways:

import getFormFields from '@sharyn/browser.getformfields'
import getFormFields from '@sharyn/browser/getFormFields'
import getFormFields from 'sharyn/browser/getFormFields'

import { getFormFields } from '@sharyn/browser'
import { getFormFields } from 'sharyn/browser'
import { getFormFields } from 'sharyn'