Wednesday, April 29, 2015

How to code a jQuery Plugin for HTML Form with Radio Buttons

In this post we describe Step by step How to code a jQuery Plugin for HTML Form with Radio Buttons.
In this article we create from scratch a small jQuery Plugin which displays an HTML Form with radiobuttons inputs and Twitter Bootstrap CSS3 style .
This jquery plugin will display an HTML5 form as the following:




How to create a jQuery Plugin for HTML Form with Radio Buttons 



First , we need the jQuery and the Bootstrap files, so browse to http://jquery.com/download/ and get the latest version of the framework in CDN(Content Delivery Network):
How to code a jQuery Plugin for HTML Form with Radio Buttons    1


Do the same to get the CSS3 Bootstrap style from the  Bootstrap's official web site:
How to code a jQuery Plugin for HTML Form with Radio Buttons   2


Add it to a new HTML5 file at the "head" element :

How to code a jQuery Plugin for HTML Form with Radio Buttons       3



Also inside the "head" tag, add two new files: one a CSS which will contain some style, and the other one will be our jQuery plugin:
How to code a jQuery Plugin for HTML Form with Radio Buttons        4


The complete code for this tutorial can be downloaded from this GitHub repository:

Next, let's write a div to contain the web Form produced by our jquery plugin:

How to code a jQuery Plugin for HTML Form with Radio Buttons      5

After the body, append a script element , where we'll next call our plugin:

How to code a jQuery Plugin for HTML Form with Radio Buttons    6

Now, open the "jqueryplugin.js" javascript file and create the plugin definition  as follows:


How to code a jQuery Plugin for HTML Form with Radio Buttons        7

As you can see, we added some parameters to set the HTML Form.
The most important of them is "oRadio", which is a string array holding the texts for the radio buttons.
Since "this" represents here the container <div>, we append to it a "form" element this way:


How to code a jQuery Plugin for HTML Form with Radio Buttons   8

Then we take the form reference and add an <h1> Title and  a <div> for containing the radio buttons.
Now, because the "oRadio" object is an array, we loop through it with a "for" , appending to the <div> an <input> of "radiobutton" type for each text in the array:


How to code a jQuery Plugin for HTML Form with Radio Buttons     9

 As you can see, we add also the Bootstrap classes, like "Jumbotron".
We add also the corresponding text:

code a jQuery Plugin for HTML Form with Radio Buttons

 And finally append a new line. The entire for loop will look as this:


 jQuery Plugin for HTML Form with Radio Buttons

After the "for" loop, we append a button to the form:

Plugin for HTML Form with Radio Buttons

The complete javascript file should appear as follows:

HTML Form with Radio Buttons

This is the code to copy-paste:


$(function(){

   $.fn.RadioForm = function(sTitle,sAction,sRadioName,sButtonText,oRadio){        
       
      var oForm = $("<form />",{class:"jumbotron",method:"post",action:sAction}).appendTo(this); 
      
      oForm.prepend("<h1>"+sTitle+"</h1>"); 
       
      var oDiv = $("<div/>",{}).appendTo(oForm);
       
       
      for(i = 0; i < oRadio.length;i++)
      {
          
          
          $("<input/>",
            { 
               type:"radio",               
               name:sRadioName,
               id:oRadio[i] ,
               value:oRadio[i]
           
            }
           ).appendTo(oDiv);
          
          
          
          $("<label/>",{
              text:oRadio[i],
              "for":oRadio[i]
              
          }).appendTo(oDiv);
          
          $("<br />").appendTo(oDiv);
      }
       
       $("<button/>",{
           text:sButtonText,
           class:"btn btn-primary"
       }).appendTo(oForm);
   
   };



})

Now we add the following style to the "styles.css" file:

How to  jQuery Plugin for HTML Form with Radio Buttons

form {
    width:50%;
    margin:0 auto;
    position: relative;
    border:5px solid #c0c0c0;
    border-radius:10px !important;
}



And, back at the HTML file, we use the plugin to insert the runtime html form inside the container  <div>:

How to Plugin for HTML Form with Radio Buttons

The complete HTML5 file should be as follows:

code a  Plugin for HTML Form with Radio Buttons

This is the code :


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Plugin - Form with Radio Buttons</title>
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="styles.css"></link>
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="Scripts/jqueryPlugin.js"></script>       
</head>
<body>
    <div class="container">         
        <div id="myDiv"></div>
    </div>   
    
</body>

<script>
        
$(function(){
            
    $("#myDiv").RadioForm("jQuery Plugin Form"," ",
                          "RadioOptions","Submit",
                          ["Option 1","Option 2","Option 3","Option 4","Option 5"]);                    
            
});
</script>
</html>


And the resulting HTML Form will appear as this:

Plugin for HTML Form with Radio



That's it....Hoping this article was useful to you,

Happy programming.....

      by Carmel Schvartzman


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