Reader Level:
ARTICLE

DynamicPopulate in JavaScript

Posted by Mahak Gupta Articles | JavaScript July 01, 2011
Here we create a simple example of DynamicPopulate.
  • 0
  • 0
  • 12106


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.

<input id="rdonormal" type="radio" name="group1" value="Normal" />Normal
        <br />
        <input id="rdoshortdate" type="radio" name="group1" value="Short Date" />Short Date
        <br />
        <input id="rdolongdate" type="radio" name="group1" value="Long Date" /> Long date
        <br />
        <input id="rdoutcdatetime" type="radio" name="group1" value="UTCDateTime" />UTC Date/Time&nbsp;&nbsp;
        <br />
        <br />
    <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()):

<input id="rdonormal" type="radio" name="group1" value="Normal" onclick="Show()" />

JavaScript Function:

function Show() {
        var a = new Date();
        document.getElementById('txtdate').value = a.toLocaleString();
              
    }


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()):

<input id="rdoshortdate" type="radio" name="group1" value="Short Date" onclick="ShowShortDate()" />Short Date

JavaScript Function:

function ShowShortDate() {
        var a = new Date();
       document.getElementById('txtdate').value = a.getMonth() + "/" + a.getDate() + "/" + a.getYear();
 
   }

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()):

<input id="rdolongdate" type="radio" name="group1" value="Long Date" onclick="ShowLongDate()"/> Long date

JavaScript Function:

function ShowLongDate() {
       var a = new Date();
      document.getElementById('txtdate').value = a.toLocaleDateString();
 
  }


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()):

<input id="rdoutcdatetime" type="radio" name="group1" value="UTCDateTime" onclick="ShowUTCDateTime()"/>UTC Date/Time

JavaScript Function:

function ShowUTCDateTime() {
      var a = new Date();s                
      document.getElementById('txtdate').value = a.toUTCString();
  }

Here ToUTCString() converts the date to a string, according to the Coordinated Universal Time (UTC).

Complete Program:

<head runat="server">
<script language="javascript" type="text/javascript">
    function Show() {
        var a = new Date();
        document.getElementById('txtdate').value = a.toLocaleString();
    }
    function ShowShortDate() {
        var a = new Date();
       document.getElementById('txtdate').value = a.getMonth() + "/" + a.getDate() + "/" + a.getYear();
 
   }
   function ShowLongDate() {
       var a = new Date();
      document.getElementById('txtdate').value = a.toLocaleDateString();

  }
  function ShowUTCDateTime() {
      var a = new Date();
      document.getElementById('txtdate').value = a.toUTCString();
  }

</script>
    <title></title>
    <style type="text/css">
        #rdonormal
        {
            width: 24px;
        }
    </style
>
</head>
<
body>
    <form id="form1" runat="server">
    <div>
        <input id="rdonormal" type="radio" name="group1" value="Normal" onclick="Show()" />Normal
        <br />
        <input id="rdoshortdate" type="radio" name="group1" value="Short Date" onclick="ShowShortDate()" />Short Date
        <br />
        <input id="rdolongdate" type="radio" name="group1" value="Long Date" onclick="ShowLongDate()"/> Long date
        <br />
        <input id="rdoutcdatetime" type="radio" name="group1" value="UTCDateTime" onclick="ShowUTCDateTime()"/>UTC Date/Time&nbsp;&nbsp;
        <br />
        <br />
    <input type="text" id="txtdate"  style=" text-align:center; width: 278px;" />
   
    </div>
    </form
>
</body>

COMMENT USING

Trending up