In this Article you will learn how to get
the values or text of
textbox,CheckBoxlist,RadioButtonList,ListBox,dropdownlist in javascript.
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
Introduction
This Article explains you how to Raise Client Click Events for Server Controlsusage:
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
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
}
</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
No comments:
Post a Comment