Wednesday, May 6, 2015

Custom jQuery Plugin to display a Form using Twitter Bootstrap

In this post we describe Step by step How to Build a Custom jQuery Plugin to display a Form using Twitter Bootstrap.
In this article we build a custom jQuery Plugin to  display :
- a customizable HTML Form with all input types as required (including text, email, number, date, color, file, hidden, datetime, button input types)
- fully customizable style , with the defaults using Twitter Bootstrap CSS3 styles .

The complete jquery plugin can be downloaded from this GitHub repository:
https://github.com/CarmelSoftware/jQueryPlugin_CustomizableForm

This custom jquery plugin will display by default a HTML5 form like this:

Custom jQuery Plugin to display a Form using Twitter Bootstrap
 The javascript to display this form is just this:

Custom jQuery Plugin to display a Form using Twitter Bootstrap       1



How to Build a Custom jQuery Plugin to display a Form using Twitter Bootstrap 



We start by adding references to the jQuery and to the CSS3 Bootstrap style  frameworks. Therefore  browse to http://jquery.com/download/ and to  the  Bootstrap's web site and get the latest releases in CDN(Content Delivery Network):


Custom jQuery Plugin to display a Form using Twitter Bootstrap       2




Then add those links, and  also two new files (one for the  style , and the other one will hold our jQuery plugin) to the head element in a new HTML5 file   :

Custom jQuery Plugin to display a Form using Twitter Bootstrap        4

 Add a div to hold the web Form produced by our jquery plugin:

Custom jQuery Plugin to display a Form using Twitter Bootstrap       5


After the body element,  call the plugin:

Custom jQuery Plugin to display a Form using Twitter Bootstrap       6



Open the "jqueryplugin.js" javascript file and write an object to contain all defaults for our plugin:

Custom jQuery Plugin to display a Form using Twitter Bootstrap       7

Notice the classes properties , holding Twitter Bootstrap definitions.
Now  code the plugin as follows:
jQuery Plugin to display a Form using Twitter Bootstrap


First thing our plugin will do is to merge the received arguments with the default ones, by using the jQuery $.extend() method  .

Next we create the Form using jQuery, and setting its style and action parameters:

Plugin to display a Form using Twitter Bootstrap


We also added the Form's Title .

Then we loop over the oFields array, which contain the required input elements to be created together with the labels for its names:

display a Form using Twitter Bootstrap

Also we added the style.
Take a look at that array, and you will see that it contains the required input elements in the form of element-name + element-type like this :  "Attachment","file" .
Then we do the same with the oRadio array containing the radio buttons if required,  inserting  radiobuttons and its labels as follows,  looping over the collection and appending the created elements to a new <div> :

Form using Twitter Bootstrap



Finally, we add a <div> holding two buttons, for Resetting  and for Submitting the Form:

using Twitter Bootstrap


Our jquery plugin will return the "this" instance, to allow jquery chaining for it:

Twitter Bootstrap



And our runtime fully customizable HTML5 Form will show as this:

Custom jQuery Plugin to display a Form using Twitter

Custom jQuery Plugin to display a Form using Bootstrap


Also, we code the following CSS3 style to the styles.css file:
Custom jQuery Plugin to display a Form


We hope that this article was useful to you.
Happy programming with jQuery.....

      by Carmel Schvartzman


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