Monday, February 18, 2013

Select ALL checkbox using getElementsByTagName javascript


Select All, Un Select All,Invert Selection in HTML Javascript.

using getElementsByTagName

Step 1) Add check boxes to html page

        <input type='checkbox' value= 'C'  >>C</input>
        <input type='checkbox' value= 'C++'  >>C#</input>
        <input type='checkbox' value= 'JAVA'  >>JAVA</input>
        <input type='checkbox' value= 'C#'  >>C#</input>
        <input type='checkbox' value= 'Vb.NET'  >>VB.NET</input>
        <input type='checkbox' value= 'PHP '  >>PHP</input>
        <input type='checkbox' value= 'UNIX SHELL SCript '  >>UNIX SHELL SCRIPT</input>
        <input type='checkbox' value= 'PERL Programming '  >>PERL Programming</input>
        <input type='checkbox' value= 'Javascript '  >>Javascript</input>
        <input type='checkbox' value= 'VB Script '  >>Vb Script</input>
        <input type='checkbox' value= 'Power Shell '  >>Power Shell</input><br />

Step 2)  Add  3  anchor tags for Select All,Un select All,Invert Selection.

  <a href="javascript:SelectALL(true)">Select ALL</a>
 <a href="javascript:SelectALL(false)">Select None</a>
 <a href="javascript:SelectALL(null)">Invert Selection</a>
Step 3) Add script for SelectALL method
        function SelectALL(status)
        {
            var eleNodelist = document.getElementsByTagName("input");
            for (i = 0; i < eleNodelist.length; i++) {
                if (eleNodelist[i].type == 'checkbox')
                    if (status == null) {
                        eleNodelist[i].checked = !eleNodelist[i].checked;
                    }
                    else eleNodelist[i].checked = status;
            }
        }

Complete Source Code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
  
        <input type='checkbox' value= 'C'  >>C</input>
        <input type='checkbox' value= 'C++'  >>C#</input>
        <input type='checkbox' value= 'JAVA'  >>JAVA</input>
        <input type='checkbox' value= 'C#'  >>C#</input>
        <input type='checkbox' value= 'Vb.NET'  >>VB.NET</input>
        <input type='checkbox' value= 'PHP '  >>PHP</input>
        <input type='checkbox' value= 'UNIX SHELL SCript '  >>UNIX SHELL SCRIPT</input>
        <input type='checkbox' value= 'PERL Programming '  >>PERL Programming</input>
        <input type='checkbox' value= 'Javascript '  >>Javascript</input>
        <input type='checkbox' value= 'VB Script '  >>Vb Script</input>
        <input type='checkbox' value= 'Power Shell '  >>Power Shell</input><br />
    <a href="javascript:SelectALL(true)">Select ALL</a> <a href="javascript:SelectALL(false)">Select None</a>
    <a href="javascript:SelectALL(null)">Invert Selection</a>
    <script type="text/javascript">
        function SelectALL(status)
        {
            var eleNodelist = document.getElementsByTagName("input");
            for (i = 0; i < eleNodelist.length; i++) {
                if (eleNodelist[i].type == 'checkbox')
                    if (status == null) {
                        eleNodelist[i].checked = !eleNodelist[i].checked;
                    }
                    else eleNodelist[i].checked = status;
            }
        }
    </script>
</body>
</html>
Tags:Javascript getElementsByTagName ,html checkbox, multiple checkbox in HTML Page,document.getElementsByTagName ,Checkbox checked,Select all Checkboxes,Unselect all check boxes,Invert Selection in checkboxes,Select ALL checkbox using getElementsByTagName
Posted by at 4 comments:

Javascript getElementsByName

Select All, Un Select All,Invert Selection in HTML Javascript.

using getElementsByName


Step 1) Add check boxes to html page

        <input type='checkbox' value= 'C' name="prog">C</input>
        <input type='checkbox' value= 'C++' name="prog">C#</input>
        <input type='checkbox' value= 'JAVA' name="prog">JAVA</input>
        <input type='checkbox' value= 'C#' name="prog">C#</input>
        <input type='checkbox' value= 'Vb.NET' name="prog">VB.NET</input>
        <input type='checkbox' value= 'PHP ' name="prog">PHP</input>
        <input type='checkbox' value= 'UNIX SHELL SCript ' name="prog">UNIX SHELL SCRIPT</input>
        <input type='checkbox' value= 'PERL Programming ' name="prog">PERL Programming</input>
        <input type='checkbox' value= 'Javascript ' name="prog">Javascript</input>
        <input type='checkbox' value= 'VB Script ' name="prog">Vb Script</input>
        <input type='checkbox' value= 'Power Shell ' name="prog">Power Shell</input><br />

Step 2)  Add  3  anchor tags for Select All,Un select All,Invert Selection.


  <a href="javascript:SelectALL(true)">Select ALL</a>
 <a href="javascript:SelectALL(false)">Select None</a>
 <a href="javascript:SelectALL(null)">Invert Selection</a>

Step 3) Add script for SelectALL method

  <script type="text/javascript">
        function SelectALL(status) {
           
            var eleNodelist = document.getElementsByName('prog');
            for (i = 0; i < eleNodelist.length; i++) {
                if (eleNodelist[i].type == 'checkbox')
                    if (status == null) {
                        eleNodelist[i].checked = !eleNodelist[i].checked;
                    }
                    else eleNodelist[i].checked = status;
            }
        }
    </script>



Complete Source Code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
   
        <input type='checkbox' value= 'C' name="prog">C</input>
        <input type='checkbox' value= 'C++' name="prog">C#</input>
        <input type='checkbox' value= 'JAVA' name="prog">JAVA</input>
        <input type='checkbox' value= 'C#' name="prog">C#</input>
        <input type='checkbox' value= 'Vb.NET' name="prog">VB.NET</input>
        <input type='checkbox' value= 'PHP ' name="prog">PHP</input>
        <input type='checkbox' value= 'UNIX SHELL SCript ' name="prog">UNIX SHELL SCRIPT</input>
        <input type='checkbox' value= 'PERL Programming ' name="prog">PERL Programming</input>
        <input type='checkbox' value= 'Javascript ' name="prog">Javascript</input>
        <input type='checkbox' value= 'VB Script ' name="prog">Vb Script</input>
        <input type='checkbox' value= 'Power Shell ' name="prog">Power Shell</input><br />
    <a href="javascript:SelectALL(true)">Select ALL</a> <a href="javascript:SelectALL(false)">Select None</a>
    <a href="javascript:SelectALL(null)">Invert Selection</a>

    <script type="text/javascript">
        function SelectALL(status) {
           
            var eleNodelist = document.getElementsByName('prog');
            for (i = 0; i < eleNodelist.length; i++) {
                if (eleNodelist[i].type == 'checkbox')
                    if (status == null) {
                        eleNodelist[i].checked = !eleNodelist[i].checked;
                    }
                    else eleNodelist[i].checked = status;
            }
        }
    </script>
   
</body>
</html>
Tags:Javascript getElementsByName,html checkbox, multiple checkbox in HTML Page,document.getElementsByName,Checkbox checked,Select all Checkboxes,Unselect all check boxes,Invert Selection in checkboxes,
Posted by at 5 comments:

Wednesday, February 13, 2013

Get Selected Value in DropDown JQuery

Get Selected Value in DropDown JQuery

This example explains how to get selected value in Html Combo Box/Drop Down/Select control( Single item)  using JQUERY.

First  add JQUERY script file reference 
  or Download fron jquery.com


Once user adds jquery .js file , then add select control with the following options

Choice select has 3 options 
                    1.One
                    2.Two
                    3.Three

User can select at most one value. i.e Single value selection.

<select   style='color:red;font-size:1.2em;'  id='selectone' size="2" >
   <option value='one'  onmouseover ="this.style.color='red'" onmouseout="this.style.color='black'">one</option>
   <option value='two'  onmouseover ="this.style.color='red'" onmouseout="this.style.color='black'">two</option>
   <option value='three'  selected="selected" onmouseover ="this.style.color='red'" onmouseout="this.style.color='black'">three</option>
</select>

Size = 1 or 2 or 3 ,  1 means 1 item will be visible
                                2 means 2 items visible at a time.

Whenever selection changes in drop down , change Event will be fired. 
and on document load complete of jquery try to access Select OnChange event handler.

Here is the Jquery Script

    <script type='text/javascript'>
      function OnSelectedValue()
      {
          alert($('#selectone').val());
      }
      $("document").ready(function () {
          $('#selectone').change(function () {
              alert('sel');
              alert($('#selectone').val());
          });
      });
    </script>
 
 

User can add Button control, On Button Click event you can access Drop Down List value
      function OnSelectedValue()
      {
          alert($('#selectone').val());
      }

<input type='button' value='Get Drop Down Value' onclick='javascript:OnSelectedValue()'/>


Here is the Complete Source Code.


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
   
    <script src="../Scripts/jquery-1.7.1.min.js"></script>

    <script type='text/javascript'>
      function OnSelectedValue()
      {
          alert($('#selectone').val());
      }
      $("document").ready(function () {
          $('#selectone').change(function () {
              alert('sel');
              alert($('#selectone').val());
          });
      });
    </script>
</head>
<body>

    <h3 style="color:maroon">How to access HTML drop down using JQUERY.</h3>
<select   style='color:red;font-size:1.2em;'  id='selectone' size="2" >
   <option value='one'  onmouseover ="this.style.color='red'" onmouseout="this.style.color='black'">one</option>
   <option value='two'  onmouseover ="this.style.color='red'" onmouseout="this.style.color='black'">two</option>
   <option value='three'  selected="selected" onmouseover ="this.style.color='red'" onmouseout="this.style.color='black'">three</option>
</select>

   <input type='button' value='Get Drop Down Value'
                  onclick='javascript:OnSelectedValue()'/>
  
</body>
</html>
 

OUTPUT:
How to access HTML Drop Down Value using JQUERY

Note: onmouseover , onmouseout  u can remove if u don't want.


Tags: How to access Drop Down value using JQUERY, How to access HTML Combo box using Jquery, How to access HTML Select control value using JQUERY, Get Drop Down value using JQUERY.
Posted by at 1 comment:

How to Create a Combo box in HTML

How to Create a Combo box in HTML




Combo box is used to select single option from various options. It is represented as a Drop down list in Web Browsers with one item visible at a time, drop arrow to show available values/options.

<body>

<h1>Combo box demo in HTML</h1>

<select type='select' onchange='SelChange(this)' style='color:red;font-size:2em;'>
   <option value='one' name='one' >one</option>
   <option value='two' name='two' >two</option>
   <option value='three' name='three' selected='true'>three</option>
   </select>
</body>



Get Selected Value in Combo box

Add Onchange event handler pass this as a parameter i.e passing combo box reference to javascript function.

add javascript code in head section or in end of the body section.

<script type='text/javascript'>
   function SelChange(obj)
   {
              var selIndex=
                  obj.selectedIndex;
                 //returns selected index range from 0 to maximum item count in Combo box.
                alert('onChange'+obj.selectedIndex+"value="+obj.value);
                 //Get Selected value using  obj.value 
   }
 </script>

Tags: Html Select, Html Select single,Html Select SelectedIndex,Html Select selected value,Select OnChange event handler, html select inline style, html selection control,html single selection control.
Posted by at 1 comment:

Thursday, February 7, 2013

Add numbers using javascript

Add numbers using javascript

Step 1) Add 2 text boxes and 1 button control

<input type='text' id='txtnum1'/> <input type='text' id='txtnum2'/>
<input type='button' value='Add' onclick='javascript: OnAdd()'/>

Step 2)  Add one result holding html tag, Here i choose div.

<div id='result' style='color:white;background-color:teal'/>

Step 3) Add javascript code to get values of step 1 text boxes ,parse those value and do result.

<script type='text/javascript'>
    function OnAdd() {
        try {
            var num1 = document.getElementById('txtnum1').value;
            var num2 = document.getElementById('txtnum2').value;
            var result = document.getElementById('result');
            result.innerHTML = parseFloat(num1) parseFloat(num2);
        }
        catch (e) {
            alert(e.message);
        }

    }
</script>


Step 4) Run the Page. enter 2 values click on Add -> you get result displayed in result div tag.

Complete code


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
<title>Add 2numbers using javascript </title>
<script type='text/javascript'>
    function OnAdd() {
        try {
            var num1 = document.getElementById('txtnum1').value;
            var num2 = document.getElementById('txtnum2').value;
            var result = document.getElementById('result');

            result.innerHTML = parseFloat(num1) parseFloat(num2);

        }
        catch (e) {
            alert(e.message);
        }

    }
</script>
</head>
<body>
<input type='text' id='txtnum1'/> <input type='text' id='txtnum2'/>
<input type='button' value='Add' onclick='javascript: OnAdd()'/>
<div id='result' style='color:white;background-color:teal'/>
</body>
</html>


Tags: Add numbers using javascript, ParseFloat in javascript, button OnClick in javascript,document.getElementById,getElementById,try catch in javascript, exceptions in javascript, javascript & html5
Posted by at 1 comment:
Subscribe to: Posts (Atom)