Convert Form Data To JSON Objects with jQuery - Form Serializer

Form Serializer is a jQuery plugin that serializes form data your user input to JSON objects on submit.

How to use it:

1. Include jQuery library and the jQuery Form Serializer plugin on your html page.

<script src="jQuery.js"></script>
<script src="jQuery-serializer.js"></script>

2. Add Html data-* attributes to your form controls as follow.

• data-field: Name of the key from object.
• data-value: It's the name of the function how the value will be taken.
• data-params: Params of jQuery function set as data-value.
• data-convert-to: Can be one of the following values: string, number or boolean.
• data-delete-if: If provided, the field will be deleted if it's equal with the attribute value.

<input id="age" 
       data-convert-to="number" 
       data-field="age" 
       type="number" 
>

3. Enable the form serializer.

$("form").serializer();

4. Events.

// listen for form data.
$("form").serializer()
  .on("serializer:data", function (e, formData) {
    // do something
  });

// When serializer:submit is triggered, then the form is serializer and the data comes in the serializer:data callback.
$("form").trigger("serializer:submit");

// By triggering serializer:fill the form is filled with data that is sent.
var formData = { name: { first: "Alice" } };
$("form").trigger("serializer:fill", [formData]);

Change log:

v1.2.0 (2015-10-08)

• Fixed the form filling

---

This awesome jQuery plugin is developed by jillix. For more Advanced Usages, please check the demo page or visit the official website.