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.
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.
2 |
data-convert-to = "number" |
3. Enable the form serializer.
1 |
$( "form" ).serializer(); |
4. Events.
02 |
$( "form" ).serializer() |
03 |
.on( "serializer:data" , function (e, formData) { |
08 |
$( "form" ).trigger( "serializer:submit" ); |
11 |
var formData = { name: { first: "Alice" } }; |
12 |
$( "form" ).trigger( "serializer:fill" , [formData]); |
Change log:
v1.2.0 (2015-10-08)
This awesome jQuery plugin is developed by jillix. For more Advanced Usages, please check the demo page or visit the official website.