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

Syedshakeer
Posted by in ASP.NET category on for Beginner level | Views : 14862 red flag
Rating: 4.4 out of 5  
 5 vote(s)

In this Article you will learn how to get the values or text 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 form.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.getElementsByTagName("Label");

How to get the value of textbox in javascript ?

in .aspx source code

<head runat="server">
    <title>Untitled Page</title>
    <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 Page</title>

    <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<labelArr.length; 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">Apple</asp:ListItem>

            <asp:ListItem Value="2">Banana</asp:ListItem>

            <asp:ListItem Value="3">Grapes</asp: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 Page</title>

    <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<inputArr.length; 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 Page</title>
     <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.NET</asp:ListItem>
            <asp:ListItem Value="2">VB.NET</asp:ListItem>
            <asp:ListItem Value="3">C#.NET</asp: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 Page</title>
    <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">SilverLight</asp:ListItem>
            <asp:ListItem Value="2">Ajax</asp:ListItem>
            <asp:ListItem Value="3">JQuery</asp: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



Page copy protected against web site content infringement by Copyscape

About the Author

Syedshakeer
Full Name: Syed Shakeer Hussiain P
Member Level:
Member Status: Member
Member Since: 2/5/2009 3:12:18 AM
Country: India
Syed Shakeer Hussain
http://www.dotnetfunda.com
Shakeer Hussain has completed his Master of Computer Applications degree from Deccan College of engg and technology of Osmania University.He is a MVM of www.dotnetspider.com.He has good experience in the areas of ASP.NET, C#.NET, VB.NET, SQL SERVER 2000/2005 and Windows Mobile. He has worked in Windows Mobile,Web Applicatin and ERP projects.

Login to vote for this post.

Comments or Responses

Posted by: Prabhakar on: 2/24/2011 | Points: 25
Very nice article ...it's a very use full
Posted by: Ajayk3 on: 7/2/2012 | Points: 25
Thanks for sharing the knowledge. Great article

Login to post response

Comment using Facebook(Author doesn't get notification)