PHPackages                             totza2010/form-data-json - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. totza2010/form-data-json

ActiveLibrary[Utility & Helpers](/categories/utility)

totza2010/form-data-json
========================

00JavaScript

Since Mar 16Pushed 2y agoCompare

[ Source](https://github.com/totza2010/form-data-json)[ Packagist](https://packagist.org/packages/totza2010/form-data-json)[ RSS](/packages/totza2010-form-data-json/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (1)DependenciesVersions (1)Used By (0)

[![Form Data Json Logo](https://camo.githubusercontent.com/74cd61afd9b6f393f430cefc9682e04b043a00a4baef1430948721981ba65d77/68747470733a2f2f627261696e666f6f6c6f6e672e6769746875622e696f2f666f726d2d646174612d6a736f6e2f696d672f6c6f676f2d726561646d652d6769746875622e706e67)](https://camo.githubusercontent.com/74cd61afd9b6f393f430cefc9682e04b043a00a4baef1430948721981ba65d77/68747470733a2f2f627261696e666f6f6c6f6e672e6769746875622e696f2f666f726d2d646174612d6a736f6e2f696d672f6c6f676f2d726561646d652d6769746875622e706e67)

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

[](#form-data-json---form-input-values-tofrom-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](https://developer.mozilla.org/docs/Web/API/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 `` element, we accept every container, even the ``
- Super small: ~3kB gzipped
- Cross Browser including IE11 (Yes, the ugly one also)

Installation
------------

[](#installation)

Download [latest release](https://github.com/brainfoolong/form-data-json/releases/latest) and include `dist/form-data-json.min.js` into your project.

```

```

###### CDN (Latest version automatically, do not use it in production because of possible breaking changes)

[](#cdn-latest-version-automatically-do-not-use-it-in-production-because-of-possible-breaking-changes)

```

```

###### NPM

[](#npm)

```
npm install form-data-json-convert
// import in NodeJS: const FormDataJson = require('form-data-json-convert')
```

###### ES6 Module

[](#es6-module)

```
import FormDataJson from 'pathtodistfolder/form-data-json.es6.js'
```

What's not supported
--------------------

[](#whats-not-supported)

- Write to `` 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
----------

[](#how-to-use)

### Read data

[](#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())

[](#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

[](#read-form-input-values-including-disabled)

```
let values = FormDataJson.toJson(document.querySelector("form"), { includeDisabled: true })
```

###### Read with file inputs as base64 data uri

[](#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

[](#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

[](#write-data)

```
FormDataJson.fromJson(document.querySelector("form"), { 'name': 'BrainFooLong' })
```

###### Set form input values and clear all other existing input values

[](#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

[](#reset-all-input-fields-to-their-default-values)

```
FormDataJson.reset(document.querySelector("form"))
```

###### Clear all input fields to empty values

[](#clear-all-input-fields-to-empty-values)

```
FormDataJson.clear(document.querySelector("form"))
```

###### All default options for toJson()

[](#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()

[](#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
-----------------

[](#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.

###  Health Score

12

—

LowBetter than 1% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity0

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity19

Early-stage or recently created project

 Bus Factor1

Top contributor holds 91.7% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/8fb6a32baf846465e5636fce9342e995d8a05ade0d3f7d517aba4af5f65f877a?d=identicon)[totza2010](/maintainers/totza2010)

---

Top Contributors

[![brainfoolong](https://avatars.githubusercontent.com/u/1684236?v=4)](https://github.com/brainfoolong "brainfoolong (99 commits)")[![totza2010](https://avatars.githubusercontent.com/u/13436403?v=4)](https://github.com/totza2010 "totza2010 (9 commits)")

### Embed Badge

![Health badge](/badges/totza2010-form-data-json/health.svg)

```
[![Health](https://phpackages.com/badges/totza2010-form-data-json/health.svg)](https://phpackages.com/packages/totza2010-form-data-json)
```

###  Alternatives

[icehouse-ventures/laravel-mermaid

Simple package to generate diagrams in Laravel using the Mermaid.js library

2630.0k](/packages/icehouse-ventures-laravel-mermaid)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)