A.G.INFOTECH: DynamicPopulate in JavaScript

Wednesday, 7 September 2011

DynamicPopulate in JavaScript

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.

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          <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          <br />        <br />    <input type="text" id="txtdate"  style=" text-align:center; width: 278px;" />
    </div>    </form></body>