Post
Ask Question

Dynamically Created Radio Buttons in Javascript

Introduction

 
Using a Button and a Div to create radio button pair (Yes / No) on button click. I described my comment on each line which helps to understand the view.
 
Source Code:
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RadioDemo.aspx.cs"  Inherits="JavascriptTutorial.RadioDemo"%>   
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title></title>  
  6.     <script type="text/javascript">  
  7.    
  8.     /* Getting Id of Div in which radio button will be add*/  
  9.         var containerDivClientId = "<%= containerDiv.ClientID %>";  
  10.    
  11.     /*variable count uses for define unique Ids of radio buttons and group name*/  
  12.         var count = 100;  
  13.    
  14.     /*This function call by button OnClientClick event and uses for create radio buttons*/  
  15.         function dynamicRadioButton()  
  16.         {  
  17.             /* create a radio button */  
  18.             var radioYes = document.createElement("input");  
  19.             radioYes.setAttribute("type", "radio");  
  20.    
  21.             /*Set id of new created radio button*/  
  22.             radioYes.setAttribute("id", "radioYes" + count);  
  23.    
  24.             /*set unique group name for pair of Yes / No */  
  25.             radioYes.setAttribute("name", "Boolean" + count);  
  26.    
  27.             /*creating label for Text to Radio button*/  
  28.             var lblYes = document.createElement("lable");  
  29.    
  30.             /*create text node for label Text which display for Radio button*/  
  31.             var textYes = document.createTextNode("Yes");  
  32.    
  33.             /*add text to new create lable*/  
  34.             lblYes.appendChild(textYes);  
  35.    
  36.             /*add radio button to Div*/  
  37.             containerDiv.appendChild(radioYes);  
  38.    
  39.             /*add label text for radio button to Div*/  
  40.             containerDiv.appendChild(lblYes);  
  41.    
  42.             /*add space between two radio buttons*/  
  43.             var space = document.createElement("span");  
  44.             space.setAttribute("innerHTML", "  ");  
  45.             containerDiv.appendChild(space);  
  46.    
  47.             var radioNo = document.createElement("input");  
  48.             radioNo.setAttribute("type", "radio");  
  49.             radioNo.setAttribute("id", "radioNo" + count);  
  50.             radioNo.setAttribute("name", "Boolean" + count);  
  51.    
  52.             var lblNo = document.createElement("label");  
  53.             lblNo.innerHTML =  "No";  
  54.             containerDiv.appendChild(radioNo);  
  55.             containerDiv.appendChild(lblNo);   
  56.             /*add new line for new pair of radio buttons*/  
  57.             var spaceBr= document.createElement("br");  
  58.             containerDiv.appendChild(spaceBr);  
  59.    
  60.             count++;  
  61.             return false;  
  62.         }  
  63.     </script>  
  64. </head>  
  65. <body>  
  66.     <form id="form1" runat="server">  
  67.     <div>  
  68.     <asp:Button ID="btnCreate" runat="server" Text="Click Me" OnClientClick="return dynamicRadioButton();" />  
  69.     <div id="containerDiv" runat="server"></div>  
  70.     </div>  
  71.     </form>  
  72. </body>  
  73. </html>  
OUTPUT:
 
Radio Button.PNG
Next Recommended Reading Change The Background Color of a Button with JavaScript.