In this article you will learn how to get the values or text of textbox, CheckBoxlist, RadioButtonList, ListBox and 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?

<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>

JavaScript1.gif

How to get the text of CheckBoxList in JavaScript?

<head id="Head1" 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>

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

<head id="Head1" 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>

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

<head id="Head1" 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>
</html>



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

<head id="Head1" 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>

JavaScript4.gif
Thanks for reading my article.