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 0% 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

[cerdic/css-tidy

CSSTidy is a CSS minifier

2092.0M6](/packages/cerdic-css-tidy)[lochmueller/calendarize

Create a structure for timely controlled tables (e.g. events) and one plugin for the different output of calendar views (list, detail, month, year, day, week...). The extension is shipped with one default event table, but you can also 'calendarize' your own table/model. It is completely independent and configurable! Use your own models as event items in this calender. Development on https://github.com/lochmueller/calendarize

77152.6k12](/packages/lochmueller-calendarize)[sitegeist/kaleidoscope

Responsive-images for Neos

29352.4k10](/packages/sitegeist-kaleidoscope)[jurchiks/numbers2words

It spells numbers (and currencies)!

20172.1k3](/packages/jurchiks-numbers2words)[giauphan/laravel-qr-code

QR Code Generator for PHP wrapper for Laravel

2765.4k1](/packages/giauphan-laravel-qr-code)[syholloway/mrcolor

Color manipulation tools and format conversion for PHP

14149.6k](/packages/syholloway-mrcolor)

PHPackages © 2026

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