Convert Form Data To JSON Objects with jQuery Form Serializer - Download Convert Form Data To JSON Objects with jQuery - Form Serializer

Download Convert Form Data To JSON Objects with jQuery – Form Serializer

Posted on

This time I will share jQuery Plugin and tutorial about Convert Form Data To JSON Objects with jQuery – Form Serializer, hope it will help you in programming stack.

Convert Form Data To JSON Objects with jQuery Form Serializer - Download Convert Form Data To JSON Objects with jQuery - Form Serializer
File Size: 205 KB
Views Total: 12560
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

1 <script src="jQuery.js"></script>
2 <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.
1 <input id="age"
2        data-convert-to="number"
3        data-field="age"
4        type="number"
5 >

3. Enable the form serializer.

1 $("form").serializer();

4. Events.

01 // listen for form data.
02 $("form").serializer()
03   .on("serializer:data", function (e, formData) {
04     // do something
05   });
06  
07 // When serializer:submit is triggered, then the form is serializer and the data comes in the serializer:data callback.
08 $("form").trigger("serializer:submit");
09  
10 // By triggering serializer:fill the form is filled with data that is sent.
11 var formData = { name: { first: "Alice" } };
12 $("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.

source : jqueryscript.net