Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/maxatwork/form2js
Javascript library for collecting form data
https://github.com/maxatwork/form2js
form forms html javascript jquery jquery-plugin
Last synced: about 11 hours ago
JSON representation
Javascript library for collecting form data
- Host: GitHub
- URL: https://github.com/maxatwork/form2js
- Owner: maxatwork
- License: mit
- Created: 2010-09-13T09:49:47.000Z (over 14 years ago)
- Default Branch: master
- Last Pushed: 2017-05-10T08:08:35.000Z (over 7 years ago)
- Last Synced: 2024-10-20T03:02:06.318Z (3 months ago)
- Topics: form, forms, html, javascript, jquery, jquery-plugin
- Language: JavaScript
- Homepage: http://maxatwork.github.com/form2js/
- Size: 596 KB
- Stars: 640
- Watchers: 42
- Forks: 137
- Open Issues: 52
-
Metadata Files:
- Readme: README.markdown
- License: license.txt
Awesome Lists containing this project
README
form2js
-------
Convenient way to collect **structured** form data into JavaScript object.
[Example](http://form2js.googlecode.com/hg/example/test.html).
Because everything is better with jQuery, jQuery plugin added, check out jquery.toObject.js.
If you have any questions/suggestions, find out something weird or illogical - feel free to post an issue.
**Warning!** form2object.js and form2object function renamed to form2js.js and form2js respectively.
Old names are in v1.0 tag.
Details
=======
This is **not** a serialization library.
Library used in example for JSON serialization is [http://www.json.org/js.html](http://www.json.org/js.html)
Structure of resulting object defined by _name_ attribute of form fields.
See examples below.
All this library does is collect form data and put it in a javascript object.
Obviously you can get a JSON/XML/etc string by serializing it, but that's not its only purpose.
Usage
=====
``` javascript
form2js(rootNode, delimiter, skipEmpty, nodeCallback, useIdIfEmptyName)
```
Values of all inputs under the _rootNode_ will be collected into one object.
skipping empty inputs if _skipEmpty_ not false.
### Objects/nested objects
Structure of resulting object defined in _name_ attributes of form fields (or _id_ if _name_ is empty and _useIdIfEmptyName_ parameter set to _true_).
_delimiter_ is "." (dot) by default, but can be changed.
``` html
```
becomes
``` json
{
"person": {
"name": {
"first": "John",
"last": "Doe"
}
}
}
```
### Arrays
Several fields with the same name with brackets defines array of values.
``` html
Steak
Pizza
Chicken
```
becomes
``` json
{
"person": {
"favFood": [ "steak", "chicken" ]
}
}
```
### Arrays of objects/nested objects
Same index means same item in resulting array.
Index doesn't specify order (order of appearance in document will be used).
``` html
- Give us your five friends' names and emails
-
Email
Name
-
Email
Name
```
becomes
``` json
{
"person" :
{
"friends" : [
{ "email" : "[email protected]", "name" : "Smith Agent" },
{ "email" : "[email protected]", "name" : "Thomas A. Anderson" }
]
}
}
```
### Rails-style notation
If array index starts with [a-zA-Z_], it will be treated as field of object.
``` html
- Rails-style test
-
rails[field1][foo]
rails[field1][bar]
-
rails[field2][foo]
rails[field2][bar]
```
will give us:
``` json
{
"rails": {
"field1": {
"foo": "baz",
"bar": "qux"
},
"field2": {
"foo": "baz",
"bar": "qux"
}
}
}
```
### Custom fields
You can implement custom nodeCallback function (passed as 4th parameter to `form2object()`) to extract custom data:
``` html
- Date of birth:
-
January
February
March
April
May
June
July
August
September
October
November
December
function processDate(node)
{
var dataName = node.getAttribute ? node.getAttribute('data-name') : '',
dayNode,
monthNode,
yearNode,
day,
year,
month;
if (dataName && dataName != '' && node.className == 'datefield')
{
dayNode = node.querySelector('input[name="'+dataName + '.day"]');
monthNode = node.querySelector('select[name="'+dataName + '.month"]');
yearNode = node.querySelector('input[name="'+dataName + '.year"]');
day = dayNode.value;
year = yearNode.value;
month = monthNode.value;
return { name: dataName, value: year + '-' + month + '-' + day};
}
return false;
}
var formData = form2object('dateTest', '.', true, processDate);
```
using `processDate()` callback `formData` will contain
``` json
{
"person": {
"dateOfBirth": "2011-01-12"
}
}
```
Why not `.serializeArray()`?
============================
JQuery's `.serializeArray()` works a bit different.
It makes this structure from markup in "Arrays of objects/nested objects" example:
``` json
[
{ "person.friends[0].email" : "[email protected]" },
{ "person.friends[0].name" : "Smith Agent" },
{ "person.friends[1].email" : "[email protected]" },
{ "person.friends[1].name" : "Thomas A. Anderson" }
]
```