Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/serbanghita/form-to-object
Convert a HTML form to a JS literal and multidimensional object.
https://github.com/serbanghita/form-to-object
form forms html-form javascript serialization typescript
Last synced: 3 days ago
JSON representation
Convert a HTML form to a JS literal and multidimensional object.
- Host: GitHub
- URL: https://github.com/serbanghita/form-to-object
- Owner: serbanghita
- License: mit
- Created: 2013-09-23T10:07:34.000Z (over 11 years ago)
- Default Branch: 3.x
- Last Pushed: 2024-07-29T07:35:19.000Z (5 months ago)
- Last Synced: 2024-10-14T12:07:45.059Z (3 months ago)
- Topics: form, forms, html-form, javascript, serialization, typescript
- Language: TypeScript
- Homepage:
- Size: 1.83 MB
- Stars: 89
- Watchers: 12
- Forks: 25
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# form-to-object (formToObject.js)
> Convert **HTML forms** with all their **fields** and **values** to **multidimensional JavaScript** objects
[](https://www.jsdelivr.com/package/npm/form_to_object)
## Install
As a [npm package](https://www.npmjs.com/package/form_to_object):
```shell
npm install form_to_object
```
```js
import formToObject from 'form_to_object';
// or
const formToObject = require('form_to_object');
```
As a JS script:
```html
```
## Example
* Using the DOM node id: `formToObject('myFormId');`
* Using the actual DOM Node reference: `formToObject(document.getElementById('myFormId'));`
Resulted value:
```json
{
"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.
## Options
| Option name | Default | Description |
|---------------------------------------------|-----------------------------|--------------------------------------------------------------------------------------------------------------------------------------|
| `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
IE 8, Firefox 3.5, Chrome, Safari, Opera 10, every mobile browser.
## Example
