Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/crapthings/lodash-form-collector
a form collector powered by lodash that support any frontend framework.
https://github.com/crapthings/lodash-form-collector
form lodash
Last synced: 5 days ago
JSON representation
a form collector powered by lodash that support any frontend framework.
- Host: GitHub
- URL: https://github.com/crapthings/lodash-form-collector
- Owner: crapthings
- License: mit
- Created: 2017-04-14T10:41:53.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-02-21T09:55:32.000Z (over 5 years ago)
- Last Synced: 2024-10-26T13:03:33.886Z (13 days ago)
- Topics: form, lodash
- Language: JavaScript
- Homepage:
- Size: 525 KB
- Stars: 96
- Watchers: 7
- Forks: 5
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-starred - crapthings/lodash-form-collector - a form collector powered by lodash that support any frontend framework. (others)
README
# lodash-form-collector
[](https://nodei.co/npm/lodash-form-collector/)
[demo](https://meteor-njccsympez.now.sh/)
## installation
> npm i -S lodash-form-collector
#### import
```js
import lfc from 'lodash-form-collector'
const lfc = require('lodash-form-collector')
```
## usage
```js
const form = document.getElementById('form')
const data = lfc(form)
console.log(data)
```
## changelog
#### 0.0.4
> if you don't specify 'data-type' on input[type='checkbox'], the default data-type is set to 'boolean'. this change allow you to collect value as 'true' or 'false' as default.
[HTML: Checkbox default value ](https://stackoverflow.com/questions/12911787/html-checkbox-default-value)
```
### >= 0.0.4
{ isEnable: true }
{ isEnable: false }
### < 0.0.4
{ isEnable: 'on' }
{}
```
### basic collecting
------
#### html
```html
```
#### result
```js
{
username: 'crapthings',
password: 'secret'
}
```
### collect nested field
------
> Sets the value at path of object. If a portion of path doesn't exist, it's created.
> Arrays are created for missing index properties while objects are created for all other missing properties.
#### html
```html
```
#### result
```js
{
something: 'anything',
profile: {
displayName: 'crapthings',
address: {
city: 'harbin'
},
age: 32,
gender: 'male'
},
array: ['string1', 'string2'],
sameName: ['text with same name', 'will be collect as array']
}
```
### single checkbox with unique name
------
> if there's a single checkbox that you want to use String as value, just write your input as normal.
when it has checked, the value will present at the form result, when unchecked it won't present at result.
> if there's a single checkbox that you want to use as Boolean, give your input an data attr data-type="boolean",
checked = true, unchecked will collect as false.
#### html
```html
```
#### result
```js
{
useValue: 'check me',
unchecked: false,
deep: {
checked: true
}
}
```
### multiple form controls with same name
------
> if there're multiple inputs like text that have same name.
it will be collecting as array, when no values are given, it gives an empty array [].
> if there're multiple checkboxes that you want to use String as value. just write your input as normal.
when it has checked, the value will present at the form result.
when all inputs unchecked it will be an empty array [].
#### html
```html
```
#### result
```js
{
emptyArray: [],
emails: ['[email protected]', '[email protected]'],
checkbox: ['a', 'b'],
}
```
### data type conversion
------
> you can turn string to number or array by using data-type="number || array || [number]".
text, textarea, search, hidden, select are supported.
> [string separator]: text. search, hidden, options of select is ',' and textarea is '\n' by default,
you can use optional by data-separator="separator".
#### html
```html
```
#### result
```js
{
"textString": "100",
"textStringToNumber": 100,
"textStringToArray": ["100", "200", "300", "400", "500" ],
"textStringItemOfArrayToNumber": [100, 200, 300, 400, 500],
"textStringItemOfArrayToNumberBySpace": [100, 200, 300, 400, 500],
"hiddenString": "100",
"hiddenStringToNumber": 100,
"hiddenStringToArray": ["100", "200", "300", "400", "500"],
"hiddenStringItemOfArrayToNumber": [100, 200, 300, 400, 500]
}
```
## TODOS
- [ ] add feature data-type='object || [object]' ?
- [ ] file to base64
## FAQ
## alternative
[form2js](https://github.com/maxatwork/form2js)
[jQuery Serialize Object](https://github.com/macek/jquery-serialize-object)
## might be useful
[dot-object](https://github.com/rhalff/dot-object)
[object-path](https://github.com/mariocasciaro/object-path)