How to get the value of Textbox, CheckBoxlist, RadioButtonList, ListBox, DropDownList in javascript

Introduction

This Article explains you how to Raise Client Click Events for Server Controls
usage:
1.Attribute 'OnClientClick':-The OnClientClick property is used to sets a client side script or Method to be run when the Button control is clicked.
eg:OnClientClick ="return javascriptMethod()"
2.getElementById():-It is used to get the Elements in a from.This method takes an argument to access elements with a unique id attribute.
eg:document.getElementById ("textbox1");
3)getElementsByTagName():-This method takes in as argument the name of a tag element and returns an array of all matching tags elements found in the document.
eg:document.getElementById ("Label");
How to get the value of textbox in javascript ?
in .aspx source code

<head runat="server">

    <title>Untitled Pagetitle>

    <script type ="text/javascript">

    function getTxt()

     var txt=document.getElementById("TextBox1");

     alert(txt.value);

    script>

head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:TextBox ID="TextBox1" runat="server" Height="16px" Style="z-index: 100; left: 176px;position: absolute; top: 32px" Width="96px">asp:TextBox>

  <asp:Button ID="Button1" runat="server" Font-Bold="True" Style="z-index:101;left:184px;position:absolute; top:64px" Text="Click" Width="56px"

 OnClientClick ="return  getTxt()"/>

        <asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Size="0.8em" Style="z-index: 103;left: 96px; position: absolute; top: 32px" Text="User Name:">asp:Label>

    div>

    form>

body>

html>

Image of textbox

How to get the text of CheckBoxList in Javascript?

<head runat="server">

    <title>Untitled Pagetitle>

    <script type="text/javascript">

    function chkboxMeth()

    {

      var chkbox = document.getElementById("CheckBoxList1");

      var inputArr = chkbox.getElementsByTagName('input');

      var labelArr = chkbox.getElementsByTagName('label');

      var sum="";

     for (var i=0; i

     {

      if (inputArr[i].checked == true)

{

sum = sum + labelArr[i].innerText;

}

    }

alert(sum);

return false;

  }

    script>

head>

<body>

    <form id="form1" runat="server">

    <div>

    <asp:CheckBoxList ID="CheckBoxList1" runat="server" AutoPostBack="True" BackColor="#00CC99" Font-Bold="True" ForeColor="#FF0066">

            <asp:ListItem Value="1">Appleasp:ListItem>

            <asp:ListItem Value="2">Bananaasp:ListItem>

            <asp:ListItem Value="3">Grapesasp:ListItem>

        asp:CheckBoxList>

        <asp:Button ID="Button1" runat="server" Style="position: absolute; z-index: 102; left: 400px; top: 48px;" Text="Click" OnClientClick =" return chkboxMeth()" BackColor="#CCCC66" Font-Bold="True" Width="64px"/>

    div>

    form>

body>

html>

Image of CheckBoxlist

How to get the value or text of radioButtonList in javascript?

<head runat="server">

    <title>Untitled Pagetitle>

    <script type ="text/javascript">             

  function GetRadioButtonSelectedValue()

  {

      var radio = document.getElementById('radiobuttonlist1');

      var inputArr = radio.getElementsByTagName('input');

      var labelArr = radio.getElementsByTagName('label');

     for (var i=0; i

     {

        if (inputArr[i].checked )

         {

          alert("Selected Value:"+inputArr[i].value+"  
                Selected Text :"+labelArr[i].innerText);

          inputArr[i].checked =false   

         }

     }



  }  

    script>

     

head>

<body>

    <form id="form1" runat="server">

    <div>

   

    <asp:RadioButtonList ID="radiobuttonlist1" runat="Server" RepeatLayout="flow" ForeColor="Blue" BackColor="#E0E0E0" Font-Bold="True" Font-Names="Verdana" Font-Size="Small">

          <asp:ListItem Text="ASP.NET" Value="1" >asp:ListItem>

          <asp:ListItem Text="SilverLight" Value="2">asp:ListItem>

          <asp:ListItem Text="C#.NET" Value="3">asp:ListItem>

   asp:RadioButtonList>



   <asp:Button ID="Button1" runat="server" Style="position: static;" Text="Select" 

     OnClientClick =" return GetRadioButtonSelectedValue(); " />

div>

    form>

body>

html>

Image of RadioButton List

How to get the selected value or text of dropdown in javascript?

 <head runat="server">

    <title>Untitled Pagetitle>

     <script type ="text/javascript">

      function ddlmeth()

var ddl=document.getElementById("DropDownList1");

     alert("Selected Value: "+ddl.value +"  "+"Selected Text: "+ddl[ddl.selectedIndex].innerText);

    script>

head>

<body>

    <form id="form1" runat="server">

    <div>

<asp:Button ID="Button1" runat="server" Style="position: absolute; z-index: 103; left: 200px; top: 120px;" Text="click" OnClientClick ="return ddlmeth()" ForeColor="#FF0066" Width="72px"  />

        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" Style="z-index: 102;

            left: 208px; position: absolute; top: 8px">

            <asp:ListItem Value="1">ASP.NETasp:ListItem>

            <asp:ListItem Value="2">VB.NETasp:ListItem>

            <asp:ListItem Value="3">C#.NETasp:ListItem>

        asp:DropDownList>

    div>

    form>

body>

Image of dropdownlist

How to get the text or value of ListBox in JavaScript?

<head runat="server">

    <title>Untitled Pagetitle>

    <script type ="text/javascript">

    function getListBox()

     var listbox=document.getElementById("ListBox1");

     alert("Selected Value:"+listbox.value+"

            Selected Text:"+listbox[listbox.selectedIndex].innerText);

    script>

head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:ListBox ID="ListBox1" runat="server" BackColor="#FFFFFF" Font-Bold="True" Font-Names="Verdana"ForeColor="#660066" Height="80px" Style="z-index: 100; left: 240px; position: absolute; top: 48px" Width="80px">

            <asp:ListItem Value="1">SilverLightasp:ListItem>

            <asp:ListItem Value="2">Ajaxasp:ListItem>

            <asp:ListItem Value="3">JQueryasp:ListItem>

        asp:ListBox>

        <asp:Button ID="Button1" runat="server" Font-Bold="True" Style="z-index: 102; left: 336px; position: absolute; top: 72px" Text="Click" Width="56px"

   OnClientClick ="return getListBox();"/>

    div>

    form>

body>

html>

Image of ListBox

I hope,you enjoyed it !

Thanking you

Syed Shakeer Hussain

Pages

Saturday, July 17, 2010