npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

form-data-json-convert

v2.2.2

Published

Convert html forms into json or fill forms from json.

Downloads

2,772

Readme

Form Data Json Logo

Form Data Json - Form input values to/from JSON (And a bit more...)

A zero dependency, cross browser library to easily get or set/manipulate form input values as/from a json object. It can handle all input types, including multidimensional array names and file input. Native FormData is limited to reading only, we have way more:

  • Read data as multidimensional object or as a flat list (similar to FormData)
  • Write data into forms
  • Read unchecked/disabled fields as well
  • Read file inputs as base64, arraybuffer, etc...
  • Clear forms
  • Reset forms to their defaults
  • And, you don't even need a <form> element, we accept every container, even the <body>
  • Super small: ~3kB gzipped
  • Cross Browser including IE11 (Yes, the ugly one also)

Installation

Download latest release and include dist/form-data-json.min.js into your project.


<script src="dist/form-data-json.min.js"></script>
CDN (Latest version automatically, do not use it in production because of possible breaking changes)

<script src="https://cdn.jsdelivr.net/npm/form-data-json-convert/dist/form-data-json.min.js"></script>
NPM
npm install form-data-json-convert
// import in NodeJS: const FormDataJson = require('form-data-json-convert')
ES6 Module
import FormDataJson from 'pathtodistfolder/form-data-json.es6.js'

What's not supported

  • Write to <input type="file"> It's impossible in javascript to set values for file inputs, for security reasons. However, reading file input as base64 data uri string is supported.

How to use

Read data

let values = FormDataJson.toJson(document.querySelector("form")) // with native element
let values = FormDataJson.toJson("#form-id") // with selector
let values = FormDataJson.toJson($("#form-id")) // with jQuery
Read form input values as a flat object (similar to native FormData())
let values = FormDataJson.toJson(document.querySelector("form"), { flatList: true })
Read form input values including disabled
let values = FormDataJson.toJson(document.querySelector("form"), { includeDisabled: true })
Read with file inputs as base64 data uri
FormDataJson.toJson(document.querySelector("form"), {
  filesCallback: function (values) {
    console.log(values)
  }
})
Read form input values but filter out, for example, all password fields
let values = FormDataJson.toJson(document.querySelector("form"), {
  inputFilter: function (inputElement) {
    return (inputElement.type || 'text') !== 'password'
  }
})

Write data

FormDataJson.fromJson(document.querySelector("form"), { 'name': 'BrainFooLong' })
Set form input values and clear all other existing input values
FormDataJson.fromJson(document.querySelector("form"), { 'name': 'BrainFooLong' }, { clearOthers: true })
Reset all input fields to their default values
FormDataJson.reset(document.querySelector("form"))
Clear all input fields to empty values
FormDataJson.clear(document.querySelector("form"))
All default options for toJson()

You can edit this defaults globally by modifying FormDataJson.defaultOptionsToJson.

{
/**
 * Include all disabled field values
 * @type {boolean}
 */
'includeDisabled': false,

/**
 * Include all button field values
 * @type {boolean}
 */
'includeButtonValues': false,

/**
 * Include all unchecked radio/checkboxes as given value when they are unchecked
 * If undefined, than the unchecked field will be ignored in output
 * @type {*}
 */
'uncheckedValue': undefined,

/**
 * A function, where first parameter is the input field to check for
 * Must return true if the field should be included
 * All other return values, as well as no return value, will skip the input field in the progress
 * @type {function|null}
 */
'inputFilter': null,

/**
 * Does return an array list, with same values as native Array.from(new FormData(form))
 * A list will look like [["inputName", "inputValue"], ["inputName", "inputValue"]]
 * The input name will not be changed and the list can contain multiple equal names
 * @type {boolean}
 */
'flatList': false,

/**
 * If true, then this does skip empty fields from the output
 * Empty is considered to be:
 * An empty array (for multiple selects/checkboxes)
 * An empty input field (length = 0 or null)
 * This does recursively remove keys
 * Example: {"agb":"1", "user" : [{"name" : ""},{"name" : ""}]} will be {"agb":"1"}
 * @type {boolean}
 */
'skipEmpty': false,

/**
 * A function that will be called when all file fields are read as base64 data uri
 * First passed parameter to this function are the form values including all file data
 * Note: If set, the original return value from toJson() returns null
 * @type {function|null}
 */
'filesCallback': null,

/**
 * By default, files are read as base64 data url
 * Possible values are: readAsDataURL, readAsBinaryString, readAsText, readAsArrayBuffer
 * @type {string}
 */
'fileReaderFunction': 'readAsDataURL',

/**
 * If true than values try to be a real Array instead of Object where possible
 * If false than all values that are multiple (multiple select, same input names checkboxes, unnamed array indexes, etc...) will be objects
 * @type {boolean}
 */
'arrayify': true
}
All default options for fromJson()

You can edit this defaults globally by modifying FormDataJson.defaultOptionsFromJson.

{
/**
 * Does expect the given values are in a flatList, previously exported with toJson
 * Instead of the default bevhiour with nested objects
 * @type {boolean}
 */
'flatList': false,

/**
 * If true, than all fields that are not exist in the passed values object, will be cleared/emptied
 * Not exist means, the value must be undefined
 * @type {boolean}
 */
'clearOthers': false,

/**
 * If true, than all fields that are not exist in the passed values object, will be reset
 * Not exist means, the value must be undefined
 * @type {boolean}
 */
'resetOthers': false,

/**
 * If true, when a fields value has changed, a "change" event will be fired
 * @type {boolean}
 */
'triggerChangeEvent': false
}

How to contribute

  • Please write an issue before you start programming.
  • Always test the official supported browsers.
  • Write all tests in docs/tests/test.html. Each new option must have an own test.