Wednesday, May 13, 2015

Build a customizable jQuery Plugin for HTML5 Form

In this post we describe Step by step How to Build a customizable jQuery Plugin for HTML5 Form.
In this article we create from scratch a custom jQuery Plugin to display an HTML Form with text, file, number, email, etc input types and radiobuttons at your wish, using Twitter Bootstrap CSS3 styles . The Form will contain any input types (text, email, number, date, color, file, hidden, datetime, button) and labels as you wish, being fully customizable.
The complete code can be found in this GitHub repository:
https://github.com/CarmelSoftware/jQueryPlugin_CustomizableForm

Our jquery plugin will shows an HTML5 form as follows:

Build a customizable jQuery Plugin for HTML5 Form
The code to produce that completely customizable form is just this:

Build a customizable jQuery Plugin for HTML5 Form  1



How to Build a customizable jQuery Plugin for HTML5 Form 



First , we have to reference to the jQuery and the CSS3 Bootstrap style  files, so browse to http://jquery.com/download/ and to  the  Bootstrap's official web site to get the latest versions of the frameworks in CDN(Content Delivery Network):
Build a customizable jQuery Plugin for HTML5 Form   2



Build a customizable jQuery Plugin for HTML5 Form    3





Add the references to the head element in a new HTML5 file   :
Build a customizable jQuery Plugin for HTML5 Form    4

Notice that we also included inside the "head" tag  two new files: one for the  style , and the other one will hold our jQuery plugin.
Next, we code a div to contain the web Form produced by our jquery plugin:
Build a customizable jQuery Plugin for HTML5 Form    5


After the body element, append a script element to call our plugin:
Build a customizable jQuery Plugin for HTML5 Form   6


Now, go to the "jqueryplugin.js" javascript file and write the plugin definition  as follows:
Build a customizable jQuery Plugin for HTML5 Form    7

The $.fn.Form is our jQuery plugin, and the defParams will hold the defaults to construct it, as follows:
Build a customizable jQuery Plugin for HTML5

Why? In case the plugin get no parameters, we apply the defaults.
Else, we merge the received arguments with the defaults, using the jQuery $.extend() method as this:

Build a customizable jQuery Plugin


Now we add the HTML5 Form to "this", which is the container where our plugin will be located:

Build a   jQuery Plugin for HTML5 Form

We included a Bootstrap class for the style, and the action where to send the request will be set by the user.
We add a Title to the Form:


 customizable jQuery Plugin for HTML5 Form


And a first div, which will hold all input elements:

  jQuery Plugin for HTML5 Form

Now we make a loop for craeting the labels for the Form's fields, following the oFields array:

 Plugin for HTML5 Form

Next, we build all input elements according to the array oFields, which contains them in the form of element-name + element-type : "Attachment","file" :


 HTML5 Form

Then, we do the same for the array of radio buttons, inserting input radiobuttons and its labels, by looping on the oRadio array and appending them to a new <div> element::


Build a customizable  Plugin for HTML5 Form


Finally, we append another <div> with two buttons, a Reset and a Submit one:

Build a customizable  HTML5 Form

At the end of our jquery plugin, we type a return expression , to allow jquery chaining on our custom plugin:

return this;

And our runtime made HTML Form will appear as this:

Build a   jQuery Plugin     Form



Build a customizable jQuery

Also, we code the following CSS3 style to the styles.css file:


Build




Hoping this post was useful to you,

Happy programming with jQuery.....

      by Carmel Schvartzman


כתב: כרמל שוורצמן