Coding Cluster

Create drop-down list - Javascript

Saturday

Create drop-down list using for loop in Javascript

Hai Folks,

The following code is used to create drop down list using for loop in javascript.
The screen shot is the example for time (12 hours formate) drop down.
Using this script you can create Minutes, Seconds,Years,etc... like this
Note: you want to create one menu, you dont want the <select> tags inside of the loop.

<script language="JavaScript" type="text/javascript">

            // loop to create the list
            TimeHours();
            function TimeHours()
            {
                var TimeHours = 0
                document.write("<select name='TimeHours'>");

                for (var i=1; i <=12; i++)
                {
                    TimeHours++;
                    document.write("<option>" + TimeHours + "</option>");
                }

            }
   </script>

Auto refresh div using Ajax

Refreshing a div without page reload using Ajax:

This Ajax code will used to refresh a div element automatically in every 3 seconds without page reload.
You can changed the refreshing time.

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>Auto Refresh</title>

    <script type="text/javascript">

      function AutoRefresh(){

        var xmlHttp;

        try{

          xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari

        }

        catch (e){

          try{

            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer

          }

          catch (e){

            try{

              xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

            }

            catch (e){

              alert("No AJAX");

              return false;

            }

          }

        }

        xmlHttp.onreadystatechange=function(){

          if(xmlHttp.readyState==4){

            document.getElementById('AutoUpdte').innerHTML=xmlHttp.responseText;

            setTimeout('AutoRefresh()',3000); // JavaScript function calls AutoRefresh() every 3 seconds

          }

        }

        xmlHttp.open("GET","Your_page_url_that_contains_the_div_content",true);

        xmlHttp.send(null);

      }

      AutoRefresh();

    </script>

  </head>

  <body>

    <div id="AutoUpdte">Your Content</div>

  </body>

</html>

Enjoy!

Check all checkboxes using javascript

Javascript Check and Uncheck All Checkboxes:
This is a simple script to check all check boxes in a form using javascript.
You can check all the check boxes inside the table by clicking another one check box placed in header of that table.
In that same way you can uncheck all checkboxes.If you unchecking a single check box from inside the table then the header(main) check box is automatically go to unchecked state.

Code:

<html>

    <head>

        <title>JavaScript - Select All checkbox in form</title>

        <style type="text/css">

            table.tblCheckDemo {

                font-family:arial;

                border-collapse:collapse;

                border: solid 3px #7f7f7f;

                font-size:small;

            }

            table.tblCheckDemo td {

                padding: 5px;

                border-right: solid 1px #7f7f7f;

            }

            table.tblCheckDemo .even {

                background-color: #EEE8AC;

            }

            table.tblCheckDemo .odd {

                background-color: #F9FAD0;

            }

            table.tblCheckDemo th {

                border: 1px solid #7f7f7f;

                padding: 5px;

                height: auto;

                background: #D0B389;

            }

        </style>

        <script LANGUAGE="JavaScript">

            function checkMain()

             {               

               if(document.myform.chkMain.checked==true)

                 { 

                       checkAll()

                 }  

              else

                { 

                    uncheckAll()

                 }

             } 

            function checkSub()

             { 

                fruit = document.myform.chkFruit;

                var count = 0;

                 for (i = 0; i < fruit.length; i++) 

                    if(fruit[i].checked) 

                      {

                    count++; 

                }

                if(fruit.length == count) 

                {                     

                     document.myform.chkMain.checked = true; 

                } 

                else 

                { 

                    document.myform.chkMain.checked = false; 

                } 

            }

            function checkAll() 

            {

                 fruit = document.myform.chkFruit;  

                for (i = 0; i < fruit.length; i++)

                     fruit[i].checked = true ; 

            } 

            function uncheckAll() 

            {

                fruit = document.myform.chkFruit; 

                for (i = 0; i < fruit.length; i++) 

                fruit[i].checked = false ; 

            }  

        </script>

    </head>

    <body>

        <form name="myform" method="post">

            <b>Select Your Favorite Fruits </b><br>

            <table class="tblCheckDemo">

                <tr>

                    <th>S.NO</th>

                    <th>Fruit</th>

 <th> <input type="checkbox" name="chkMain" onClick="checkMain()"></th>

                </tr>

                <tr class="even">

                    <td>1</td>

                    <td>Apple</td>

 <td> <input type="checkbox" name="chkFruit" value="1" onClick="checkSub()"></td>

                </tr>

                <tr class="odd">

                    <td>2</td>

                    <td>Orange</td>                    <td> <input type="checkbox" name="chkFruit" value="2" onClick="checkSub()"></td>

                </tr>

                         .

                         .

                         . 

                         .

            </table>

        </form>

    </body>

</html>