Nostalgic Punchcard Missing
    Have ideas to improve npm?Join in the discussion! »

    form-json
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.1 • Public • Published

    Form JSON CircleCI

    Converts an HTMLFormElement to a typed JavaScript object.

    How to use

    1. Install

      npm install --save form-json
    2. Import and use it

      import formJson from 'form-json'
       
      const form = document.forms[0]
      const obj = formJson(form)
       
      // print the obj converted by the form
      console.log(obj)

    Why JSON

    Though we already have FormData to send form data asynchronously, there are still many reasons to convert form elements to json objects.

    • Some APIs only accept the application/json content type.
    • You want to change the structure of the form data.
    • You don't want to handle the form data especially.
    • You don't want to lose the the type information of fields.

    Anyway, I wrote this library for the above reasons.

    Usage

    • If there are multiple fields with the same name, they will be combined into one array.

      <form>
        <input type="text" name="hobbies" value="singing" />
        <input type="text" name="hobbies" value="dancing" />
      </form>

      So this form will be parsed to { hobbies: ['singing', 'dancing'] }

    • It can understand nested keys even containing arrays, so it's fine to do this.

      <form>
        <input type="text" name="name.first" value="Idan" />
        <input type="text" name="name.last" value="Loo" />
        <input type="email" name="info.contacts" value="im@siwei.lu" />
        <input type="phone" name="info.contacts" value="it's a secret" />
      </form>

      This form will be parsed to

      {
          name: {
              first: 'Idan',
              last: 'Loo'
          },
          info: {
              contacts: [
                  'im@siwei.lu',
                  "it's a secret"
              ]
          }
      }
    • It automatically converts ['number', 'range'] types to Number, and ['date', 'month'] types to Date.

      <form>
        <input type="range" name="speed" value="50" />
        <input type="number" name="age" value="23" />
        <input type="month" name="month" value="2019-07" />
        <input type="date" name="date" value="2019-07-10" />
      </form>

      This form will be parsed to

      {
        range: 50,
        age: 23,
        month: new Date('2019-07'),
        date: new Date('2019-07-10')
      }
    • It uses form.elements to get form elements, which means it doesn't care about the sturecture of the form, but the form elements such as input, select.

      <form>
        <label> Name: <input type="text" name="name" value="Idan Loo" /> </label>
        <label>
          Location:
          <select name="contact.location" value="China">
            <option value="China">China</option>
            <option value="US">The US</option>
            <option value="UK">The UK</option>
          </select>
        </label>
      </form>

      This form is acceptable and parsed to

      {
        name: 'Idan Loo',
        location: 'China'
      }
    • The value of a file input will be an useless fake path.

      <!-- You cannot convert this form because of the file input -->
      <form>
        <input type="file" name="photo" />
      </form>

    Use With React

    If you are using some modern front-end libraries such as React, Vue, Angular, you probably know that almost all of these libraries don't recommend modifying DOM nodes directyly. So you have to get the form DOM through some tricks.

    • Listen to the onSubmit event (Recommend)

      import formJson from 'form-json'
       
      const Form = () => {
        const handleSubmit = (e) => {
          // Bingo
          const json = formJson(e.currentTarget)
        }
       
        return (
          <form onSubmit={handleSubmit}>
            <!-- some elements -->
          </form>
        )
      }
    • Use createRef

      import React, { createRef } from 'react'
      import formJson from 'form-json'
       
      const Form = () => {
        const formRef = createRef()
       
        const handleSomeEvent = () => {
          // Bingo
          const json = formJson(formRef.current)
        }
       
        return (
          <form ref={formRef}>
            <!-- some elements -->
          </form>
        )
      }

    Pretty Good right? Star this project if you like it.

    Keywords

    Install

    npm i form-json

    DownloadsWeekly Downloads

    82

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    7.22 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar