EasyFormJson jQuery Plugin Documentation by Najmul Iqbal v1.0

---

EasyFormJson jQuery Plugin

---

Table of Contents

1. Overview
2. Features
3. Dependencies
4. Options
5. Methods
6. Installation

---

A) Overview - Top

It is a jQuery plugin that serializes data of a form to JSON. Another important feature is that it also displays data in the relevant form elements from JSON. You just need to create a form and you don't need to get or put data manually.

We usually create a form to get input from user. We usually get data from the form elements one by one manually and we also set the form element value manually that takes a lot of time when we create lots of forms. Our plugin makes it super easy to get data from the form in JSON format. It also makes it extemely easy to display values in the relevant form elements from JSON. We just need to provide IDs and names for each form element. Also in the JSON the property name/key should be same as the form element name.

---

B) Features - Top

1. It serializes form data to JSON.
2. It displays values in the form elements from JSON (the most important feature of the plugin).
3. It supports checkboxes and radio buttons.
4. It supports drop down and multi select lists.
5. It supports textarea and text boxes.
6. It supports password and hidden fields.
7. It supports HTML5 input types (color, date, datetime, number etc.).
8. Documentation and demo included.

---

C) Dependencies - Top

1. jquery.ui.widget.js:
   We have created stateful jQuery plugin using the jQuery widget factory therefore, it depends on the jquery.ui.widget.js.

---

D) Options - Top

1. data:
   Type: String
   Default: ""
   
   The data that is displayed in the form.
   
   Example:
   $('#frmEmployee').easyFormJson({
      data: '{"FirstName":"William","LastName":"Hurt","Country":"1"}'
   });
   
2. serializeDisabledItems:
   Type: Boolean
   Default: true
   
   It indicates whether disabled form elements should be serialized.
   
   Example:
   $('#frmEmployee').easyFormJson({
      serializeDisabledItems: false
   });
   

---

E) Methods - Top

1. data():
   It gets data from the form in JSON format.
   
   Returns: String
   
   Example:
   var data = $('#frmEmployee').easyFormJson("data");
   
2. data(data):
   It sets data of the form. It should be in JSON format.
   
   Parameters:
   data

   Type: String
   The data to be displayed in the form. It should be in JSON format. Note that the property name/key should be same as the element name (not id) of the form. Also provide a unique id for each element of the form.

   Example:
   $('#frmEmployee').easyFormJson("data", '{"FirstName":"William","LastName":"Hurt","Country":"1"}');
   

---

F) Installation - Top

• Include the jQuery main file.
• Include the jQuery UI widget file.
• Include the plugin file.
• Here is an example:
  <script type="text/javascript" src="./scripts/jquery-1.11.2.min.js" ></script>
  <script type="text/javascript" src="scripts/jquery.ui.widget.js" ></script>
  <script type="text/javascript" src="./scripts/easy.form.json.min.js"></script>
  

Note: This plugin does not have any css file.

---

Once again, thank you so much for purchasing this plugin. As I said at the beginning, I'd be glad to help you if you have any questions relating to this plugin. No guarantees, but I'll do my best to assist. If you have a more general question relating to the apps on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Najmul Iqbal

Go To Table of Contents

---