PHPackages                             serbanghita/form-to-object.js - 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. [Parsing & Serialization](/categories/parsing)
4. /
5. serbanghita/form-to-object.js

ActiveLibrary[Parsing & Serialization](/categories/parsing)

serbanghita/form-to-object.js
=============================

Plain JavaScript method to convert a HTML form (fields and values) to JavaScript (multidimensional) object.

v3.2.0(4mo ago)902825[2 issues](https://github.com/serbanghita/form-to-object/issues)MITTypeScriptCI passing

Since Jan 6Pushed 5d ago10 watchersCompare

[ Source](https://github.com/serbanghita/form-to-object)[ Packagist](https://packagist.org/packages/serbanghita/form-to-object.js)[ Docs](https://github.com/serbanghita/formToObject.js)[ RSS](/packages/serbanghita-form-to-objectjs/feed)WikiDiscussions 3.x Synced 1mo ago

READMEChangelogDependenciesVersions (17)Used By (0)

form-to-object (formToObject.js)
================================

[](#form-to-object-formtoobjectjs)

> Convert **HTML forms** with all their **fields** and **values** to **multidimensional JavaScript** objects

[![Workflow status](https://camo.githubusercontent.com/8945d41be890406515a87550c53b14dd1c65ece194d0c1e1a43ac1e5d5a3fccc/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f73657262616e67686974612f666f726d546f4f626a6563742f746573742e796d6c3f7374796c653d666c61742d737175617265)](https://camo.githubusercontent.com/8945d41be890406515a87550c53b14dd1c65ece194d0c1e1a43ac1e5d5a3fccc/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f73657262616e67686974612f666f726d546f4f626a6563742f746573742e796d6c3f7374796c653d666c61742d737175617265)[![Codecov branch](https://camo.githubusercontent.com/121e4fe754e9e65012f619035c072b266fec1e21080176d07987b09efcd9d5c8/68747470733a2f2f696d672e736869656c64732e696f2f636f6465636f762f632f67682f73657262616e67686974612f666f726d546f4f626a6563742e6a732f762e322e312e303f746f6b656e3d425a5253347639415779267374796c653d666c61742d737175617265)](https://camo.githubusercontent.com/121e4fe754e9e65012f619035c072b266fec1e21080176d07987b09efcd9d5c8/68747470733a2f2f696d672e736869656c64732e696f2f636f6465636f762f632f67682f73657262616e67686974612f666f726d546f4f626a6563742e6a732f762e322e312e303f746f6b656e3d425a5253347639415779267374796c653d666c61742d737175617265)[![npm version](https://camo.githubusercontent.com/b68e9aaebfa401e0aff4d24e96f60ceeed23651db428e987db586c085f0b0017/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f666f726d5f746f5f6f626a6563743f7374796c653d666c61742d737175617265)](https://camo.githubusercontent.com/b68e9aaebfa401e0aff4d24e96f60ceeed23651db428e987db586c085f0b0017/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f666f726d5f746f5f6f626a6563743f7374796c653d666c61742d737175617265)[![npm downloads](https://camo.githubusercontent.com/387f97fce00b46e3019eb7c341cf0c31e95bda74406731e476cd5d8824fbffa4/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f646d2f666f726d5f746f5f6f626a6563743f7374796c653d666c61742d737175617265)](https://camo.githubusercontent.com/387f97fce00b46e3019eb7c341cf0c31e95bda74406731e476cd5d8824fbffa4/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f646d2f666f726d5f746f5f6f626a6563743f7374796c653d666c61742d737175617265)[![](https://camo.githubusercontent.com/fd08897fe27bcb094d1bc7fce445c66bf31e4f565aa66dfd2427b3de58481e3b/68747470733a2f2f646174612e6a7364656c6976722e636f6d2f76312f7061636b6167652f6e706d2f666f726d5f746f5f6f626a6563742f6261646765)](https://www.jsdelivr.com/package/npm/form_to_object)

Install
-------

[](#install)

As a [npm package](https://www.npmjs.com/package/form_to_object):

```
npm install form_to_object
```

```
import formToObject from 'form_to_object';
// or
const formToObject = require('form_to_object');
```

As a JS script:

```

```

Example
-------

[](#example)

- Using the DOM node id: `formToObject('myFormId');`
- Using the actual DOM Node reference: `formToObject(document.getElementById('myFormId'));`

Resulted value:

```
{
  "saveSettings": "Save",
  "name": "Serban",
  "race": "orc",
  "settings": {
     "input": "keyboard",
     "video": {
        "resolution": "1024x768",
        "vsync": "on"
     }
  }
}
```

Good to know:

1. If `` fields are found, but they lack of `name` attribute property, the result will be `{}` (empty object).
2. If `` contains only `disabled` fields, the result will be `{}` (empty object). If you force `includeDisabledFields` then key:value pairs will be returned.
3. An empty `` will throw an Error.
4. In case of an error like non-existing form or invalid selector, an Error will be thrown.

TypeScript
----------

[](#typescript)

The library includes TypeScript definitions. Use generics to get typed results:

```
import formToObject from 'form_to_object';

// Define your form data interface
interface UserSettingsForm {
  name: string;
  email: string;
  settings: {
    theme: 'light' | 'dark';
    notifications: boolean;
  };
}

// Pass the interface as a generic type parameter
const data = formToObject('settingsForm');

if (data) {
  console.log(data.name);           // string
  console.log(data.settings.theme); // 'light' | 'dark'
}
```

You can also use CSS selectors (class, attribute, etc.):

```
// By ID (with or without #)
formToObject('#myForm');
formToObject('myForm');

// By class
formToObject('.registration-form');

// By attribute
formToObject('form[data-type="checkout"]');

// By DOM reference
const form = document.querySelector('form') as HTMLFormElement;
formToObject(form);
```

Options
-------

[](#options)

Option nameDefaultDescription`includeEmptyValuedElements``boolean` (default `false`)Return field names as keys with empty value `""` instead of just ignoring them.`w3cSuccessfulControlsOnly``boolean` (default `false`)TBA, WIP`selectNameWithEmptyBracketsReturnsArray``boolean` (default `true`)`` field names like `name="select[]"` always return an array `[a,b]` instead or array of arrays `[0: [a,b]]`.`checkBoxNameWithEmptyBracketsReturnsArray``boolean` (default `true`)`` checkboxes with field names like `name=checkbox[]` always return an array `[a,b]` instead or array of arrays `[0: [a,b]]`.Browser support
---------------

[](#browser-support)

IE 8, Firefox 3.5, Chrome, Safari, Opera 10, every mobile browser.

Example
-------

[](#example-1)

[![](demo.png)](demo.png)

###  Health Score

54

—

FairBetter than 97% of packages

Maintenance89

Actively maintained with recent releases

Popularity24

Limited adoption so far

Community21

Small or concentrated contributor base

Maturity71

Established project with proven stability

 Bus Factor1

Top contributor holds 92.8% 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.

###  Release Activity

Cadence

Every ~281 days

Recently: every ~190 days

Total

14

Last Release

129d ago

Major Versions

1.0.9 → 2.0.02018-04-06

v2.2.0-rc.0 → 3.0.x-dev2023-12-19

### Community

Maintainers

![](https://www.gravatar.com/avatar/ddd460f765d06d9f5db2f7076125b13a15da46097a725f477b602952d659f9ca?d=identicon)[serbanghita](/maintainers/serbanghita)

---

Top Contributors

[![serbanghita](https://avatars.githubusercontent.com/u/1106849?v=4)](https://github.com/serbanghita "serbanghita (194 commits)")[![victorstanciu](https://avatars.githubusercontent.com/u/25879?v=4)](https://github.com/victorstanciu "victorstanciu (6 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (5 commits)")[![krismeister](https://avatars.githubusercontent.com/u/1367719?v=4)](https://github.com/krismeister "krismeister (2 commits)")[![bogdananton](https://avatars.githubusercontent.com/u/1594303?v=4)](https://github.com/bogdananton "bogdananton (1 commits)")[![tomByrer](https://avatars.githubusercontent.com/u/1308419?v=4)](https://github.com/tomByrer "tomByrer (1 commits)")

---

Tags

formformshtml-formjavascriptserializationtypescriptjavascriptJSserializehtmlobjectformfields

### Embed Badge

![Health badge](/badges/serbanghita-form-to-objectjs/health.svg)

```
[![Health](https://phpackages.com/badges/serbanghita-form-to-objectjs/health.svg)](https://phpackages.com/packages/serbanghita-form-to-objectjs)
```

###  Alternatives

[opis/closure

A library that can be used to serialize closures (anonymous functions) and arbitrary data.

2.6k230.0M284](/packages/opis-closure)[masterminds/html5

An HTML5 parser and serializer.

1.8k242.8M229](/packages/masterminds-html5)[league/html-to-markdown

An HTML-to-markdown conversion helper for PHP

1.9k28.6M199](/packages/league-html-to-markdown)[ovidigital/js-object-to-json

PHP library to convert a JavaScript object string to JSON formatted string

18177.7k6](/packages/ovidigital-js-object-to-json)[hexydec/htmldoc

A token based HTML document parser and minifier. Minify HTML documents including inline CSS, Javascript, and SVG's on the fly. Extract document text, attributes, and fragments. Full test suite.

2610.3k3](/packages/hexydec-htmldoc)[middlewares/minifier

Middleware to minify Html, CSS and Javascript responses

1729.1k2](/packages/middlewares-minifier)

PHPackages © 2026

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