Get Object from form

Task

Using javascript, get the object containing the form data. The set of fields and properties must be specified by the form markup. Why - in order to get json, xml from this object, and even more applications can be found.

Decision

Take here: code.google.com/p/form2js github.com/maxatwork/form2js

Using

The structure of the resulting object is taken from the name attribute. The notation is similar to Castle.Monorail and ASP.Mvc.
Yes, in the examples below you can see something similar to JSON. So, the library does not serialize in JSON. In the example for library serialization was used www.json.org/js.html .
The result of the work is a Javascript object (you can get it by making the eval the lines below) containing the form data, not a string. Obviously, you can get its JSON representation from this object, but this is not the main task of the library.

Objects / Nested Objects

1. < input type = "text" name = "person.name.first" value = "John" />
2. < input type = "text" name = "person.name.last" value = "Doe" />

* This source code was highlighted with Source Code Highlighter .

')
on output will give

1. {
2. "person" :
3. {
4. "name" :
5. {
6. "first" : "John" ,
7. "last" : "Doe"
8. }
9. }
10. }

* This source code was highlighted with Source Code Highlighter .

Arrays

1. < label > < input type = "checkbox" name = "person.favFood []" value = "steak" checked = "checked" /> Steak </ label >
2. < label > < input type = "checkbox" name = "person.favFood []" value = "pizza" /> Pizza </ label >
3. < label > < input type = "checkbox" name = "person.favFood []" value = "chicken" checked = "checked" /> Chicken </ label >

* This source code was highlighted with Source Code Highlighter .

on output will give

1. {
2. "person" :
3. {
4. "favFood" : [ "steak" , "chicken" ]
5. }
6. }

* This source code was highlighted with Source Code Highlighter .

Object arrays

1. < dl >
2. < dt > Give us your friends and friends </ dt >
3. < dd >
4. < label > Email < input type = "text" name = "person.friends [0] .email" value = "agent.smith@example.com" /> </ label >
5. < label > Name < input type = "text" name = "person.friends [0] .name" value = "Smith Agent" /> </ label >
6. </ dd >
7. < dd >
8. < label > Email < input type = "text" name = "person.friends [1] .email" value = "n3o@example.com" /> </ label >
9. < label > Name < input type = "text" name = "person.friends [1] .name" value = "Thomas A. Anderson" /> </ label >
10. </ dd >
11. </ dt >
12. </ dl >

* This source code was highlighted with Source Code Highlighter .

on output will give

1. {
2. "person" :
3. {
4. "friends" : [
5. { "email" : "agent.smith@example.com" , "name" : "Smith Agent" },
6. { "email" : "n3o@example.com" , "name" : "Thomas A. Anderson" }
7. ]
8. }
9. }

* This source code was highlighted with Source Code Highlighter .

Difference from .serializeArray () in jQuery

Very popular question.
.serializeArray() will make an example of an example with an array of objects:

1. [
2. { "person.friends [0] .email" : "agent.smith@example.com" },
3. { "person.friends [0] .name" : "Smith Agent" },
4. { "person.friends [1] .email" : "n3o@example.com" },
5. { "person.friends [1] .name" : "Thomas A. Anderson" }
6. ]

* This source code was highlighted with Source Code Highlighter .

The difference is obvious.

Conclusion

Who needs - use (MIT), well, and certainly the bugs are complete, depending on the free time I will rule.

UPD: Filled source in hg. At the same time, you can see an example of work here: form2js.googlecode.com/hg/example/test.html