Post
Ask Question

DynamicPopulate in JavaScript

Introduction

 
Here we create a simple example of DynamicPopulate. In this example when we select the particular date format, the TextBox will show the result on the basis of the current Date.
  
DynaJava.gif
 
Step 1: First we take four radio buttons and a TextBox in our Form.
  1. <input id="rdonormal" type="radio" name="group1" value="Normal" />Normal  
  2.         <br />  
  3.         <input id="rdoshortdate" type="radio" name="group1" value="Short Date" />Short Date  
  4.         <br />  
  5.         <input id="rdolongdate" type="radio" name="group1" value="Long Date" /> Long date  
  6.         <br />  
  7.         <input id="rdoutcdatetime" type="radio" name="group1" value="UTCDateTime" />UTC Date/Time    
  8.         <br />  
  9.         <br />  
  10.     <input type="text" id="txtdate"  style=" text-align:center; width: 278px;" /> 
Note: Here name is used to tell the group name. When we select one button, the other button of the other groups are unselected.
 
Step 2: Now we write JavaScript Functions:
 
(a): Here we write the code for the first radio button (rdonormal); when we click on it, it shows the date according to the js function(Show()):
  1. <input id="rdonormal" type="radio" name="group1" value="Normal" onclick="Show()" /> 
JavaScript Function
  1. function Show() {  
  2.         var a = new Date();  
  3.         document.getElementById('txtdate').value = a.toLocaleString();  
  4.                 
  5.     } 
Here the toLocaleString() method is used to convert the date to a string according to the Locale.
 
(b) ): Here we write the code for the first radio button (rdoshortdate); when we click on it, it shows the date according to the js function(ShowShortDate()):
  1. <input id="rdoshortdate" type="radio" name="group1" value="Short Date" onclick="ShowShortDate()" />Short Date 
JavaScript Function
  1. function ShowShortDate() {  
  2.         var a = new Date();  
  3.        document.getElementById('txtdate').value = a.getMonth() + "/" + a.getDate() + "/" + a.getYear();  
  4.    
  5.    } 
Here we use the getDate(), getMonth() and getYear() functions to get the current Date, Month and Year.
 
(c) ): Here we write the code for the first radio button (rdolongdate); when we click on it, it shows the date according to the js function(ShowLongDate()):
  1. <input id="rdolongdate" type="radio" name="group1" value="Long Date" onclick="ShowLongDate()"/> Long date  
JavaScript Function
  1. function ShowLongDate() {  
  2.        var a = new Date();  
  3.       document.getElementById('txtdate').value = a.toLocaleDateString();  
  4.    
  5.   } 
Here the tolocaleDateString() method returns the date portion as a string as per the Locale.
 
(d) ): Here we write the code for the first radio button (rdoutcdatetime); when we click on it, it shows the Date according to the js function(ShowUTCDateTime()):
  1. <input id="rdoutcdatetime" type="radio" name="group1" value="UTCDateTime" onclick="ShowUTCDateTime()"/>UTC Date/Time 
JavaScript Function
  1. function ShowUTCDateTime() {  
  2.       var a = new Date();s                  
  3.       document.getElementById('txtdate').value = a.toUTCString();  
  4.   } 
Here ToUTCString() converts the date to a string, according to the Coordinated Universal Time (UTC).
 
Complete Program
  1. <head runat="server">  
  2. <script language="javascript" type="text/javascript">  
  3.     function Show() {  
  4.         var a = new Date();  
  5.         document.getElementById('txtdate').value = a.toLocaleString();  
  6.     }  
  7.     function ShowShortDate() {  
  8.         var a = new Date();  
  9.        document.getElementById('txtdate').value = a.getMonth() + "/" + a.getDate() + "/" + a.getYear();  
  10.    
  11.    }  
  12.    function ShowLongDate() {  
  13.        var a = new Date();  
  14.       document.getElementById('txtdate').value = a.toLocaleDateString();  
  15.   }  
  16.   function ShowUTCDateTime() {  
  17.       var a = new Date();  
  18.       document.getElementById('txtdate').value = a.toUTCString();  
  19.   }  
  20. </script>  
  21.     <title></title>  
  22.     <style type="text/css">  
  23.         #rdonormal  
  24.         {  
  25.             width: 24px;  
  26.         }  
  27.     </style>  
  28. </head>  
  29. <body>  
  30.     <form id="form1" runat="server">  
  31.     <div>  
  32.         <input id="rdonormal" type="radio" name="group1" value="Normal" onclick="Show()" />Normal  
  33.         <br />  
  34.         <input id="rdoshortdate" type="radio" name="group1" value="Short Date" onclick="ShowShortDate()" />Short Date  
  35.         <br />  
  36.         <input id="rdolongdate" type="radio" name="group1" value="Long Date" onclick="ShowLongDate()"/> Long date  
  37.         <br />  
  38.         <input id="rdoutcdatetime" type="radio" name="group1" value="UTCDateTime" onclick="ShowUTCDateTime()"/>UTC Date/Time    
  39.         <br />  
  40.         <br />  
  41.     <input type="text" id="txtdate"  style=" text-align:center; width: 278px;" />  
  42.      
  43.     </div>  
  44.     </form>  
  45. </body> 


Similar Articles