Получаем Object из формы

Задача

При помощи javascript'а получить объект, содержащий данные формы. Набор полей и свойств должен задаваться разметкой формы. Зачем — чтоб из этого объекта получить json, xml, да и мало ли еще применений можно найти.

Решение

Берем тут: code.google.com/p/form2js github.com/maxatwork/form2js

Использование

Структура получившегося объекта берется из атрибута name. Нотация схожа c Castle.Monorail и ASP.Mvc.
Да, в примерах ниже видно что то, похожее на JSON. Так вот, библиотека не сериализует в JSON. В примере для сериализации была использована библиотека www.json.org/js.html.
Результат работы — объект Javascript (его можно получить, сделав eval приведенных ниже строк), содержащий данные формы, не строка. Очевидно, из этого объекта можно получить его JSON-представление, но это не основная задача библиотеки.

Объекты/вложенные объекты

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.

на выходе даст

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.

Массивы

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.

на выходе даст

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

* This source code was highlighted with Source Code Highlighter.

Массивы объектов

1. <dl>
2.  <dt>Give us your five friends' names and emails</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.

на выходе даст

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.

Отличие от .serializeArray() в jQuery

Очень популярный вопрос.
.serializeArray() сделает из примера с массивом объектов вот такой объект:

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.

Разница очевидна.

Заключение

Кому нужно — пользуйте (MIT), ну и багов наверняка полно, в зависимости от свободного времени буду править.

UPD: Залил исходники в hg. Заодно пример работы можно тут посмотреть: form2js.googlecode.com/hg/example/test.html