In this article I am going to show how to get value from asp.net controls like TextBox, RadioButtonList, DropDownList, CheckBoxes through JavaScript.
Introduction
In day to day life generally we need to get values from asp.net server controls through JavaScript while developing web applications. I found several questions on the internet for the same subject. In this article I am going to show how to get values from asp.net controls like TextBox, RadioButtonList, DropDownList, CheckBoxes.
This picture is the UI screenshots of the the code I am going to present in this article
Getting TextBox Value in JavaScript
.aspx page code
Following code will render a TextBox and a Button control as displayed in the picture above.
<table>
<tr>
<th colspan="2" align="left">
Getting TextBox Value in JavaScript:
</th>
</tr>
<tr>
<td>
<asp:TextBox ID="txt1" runat="server"></asp:TextBox>
</td>
<td>
<input type="button" value="Submit" onclick="GetTextBoxValue('<%= txt1.ClientID %>')" />
</td>
</tr>
</table>
JavaScript function
Following code is JavaScript function to get value from TextBox control.
// Get TextBox value
function GetTextBoxValue(id)
{
alert(document.getElementById(id).value);
}
Getting DropDownList/ListBox selected value
Following code will render a DropDown (Html select control) and a button as displayed in the picture above.
.aspx code
<table>
<tr>
<th colspan="2" align="left">
Getting DropDown/ListView Value
</th>
</tr>
<tr>
<td>
<asp:DropDownList ID="dropDown" runat="Server">
<asp:ListItem Text="Item 1" Value="1" Selected="True"></asp:ListItem>
<asp:ListItem Text="Item 2" Value="2"></asp:ListItem>
<asp:ListItem Text="Item 3" Value="3"></asp:ListItem>
</asp:DropDownList>
</td>
<td>
<input type="button" value="Submit" onclick="GetDropDownValue('<%= dropDown.ClientID %>')" />
</td>
</tr>
</table>
JavaScript Code
Following is the JavaScript function to get the value from DropDown control
// Get DropDown value
function GetDropDownValue(id)
{
alert(document.getElementById(id).value);
}
Getting RadioButtonList selected value
Following code will render RadioButtons and a button as displayed in the picture above.
.aspx code
<table>
<tr>
<th colspan="2" align="left">
Getting RadioButton Value
</th>
</tr>
<tr>
<td>
<asp:RadioButtonList ID="radiobuttonlist1" runat="Server" RepeatLayout="flow" RepeatDirection="horizontal">
<asp:ListItem Text="Radio 1" Value="1" Selected="True"></asp:ListItem>
<asp:ListItem Text="Radio 2" Value="2"></asp:ListItem>
<asp:ListItem Text="Radio 3" Value="3"></asp:ListItem>
</asp:RadioButtonList>
</td>
<td>
<input type="button" value="Submit" onclick="GetRadioButtonValue('<%= radiobuttonlist1.ClientID %>')" />
</td>
</tr>
</table>
JavaScript Code
Following is the JavaScript function to get the selected value from RadioButtons
// Get radio button list value
function GetRadioButtonValue(id)
{
var radio = document.getElementsByName(id);
for (var ii = 0; ii < radio.length; ii++)
{
if (radio[ii].checked)
alert(radio[ii].value);
}
}
Getting CheckBox checked status
Following code will render a checkbox and a button as displayed in the picture above.
.aspx code
<table>
<tr>
<th colspan="2" align="left">
Getting Checkbox Value
</th>
</tr>
<tr>
<td>
<asp:CheckBox runat="server" ID="checkBox1" Text="Check Box" />
</td>
<td>
<input type="button" value="Submit" onclick="GetCheckBoxValue('<%= checkBox1.ClientID %>')" />
</td>
</tr>
</table>
JavaScript Code
Following is the JavaScript function to get value from a Checkbox.
// Get Checkbox checked status
function GetCheckBoxValue(id)
{
alert(document.getElementById(id).checked);
}
Show/Hide Text using
Following code will render three buttons and a table element having some text as displayed in the picture above.
.aspx code
<b>Show/Hide display text</b><br />
<input type="button" value="Toggle Display Following Text" onclick="ToggleFollowingText('table1')" />
<input type="button" value="Show Only" onclick="ShowOrHide('show', 'table1')" />
<input type="button" value="Hide Only" onclick="ShowOrHide('hide', 'table1')" />
<table id="table1">
<tr>
<td style="background-color:Aqua">
This is my hidden text, You can play with it by clicking above button.
</td>
</tr>
</table>
JavaScript Code
Following is the JavaScript function to toggle display the table and show and hide element the table.
// Show/Hide element
function ToggleFollowingText(id)
{
document.getElementById(id).style.display == '' ? document.getElementById(id).style.display = 'none' : document.getElementById(id).style.display = '';
}
// Either show or hide element
function ShowOrHide(condition, id)
{
if (condition == 'show')
document.getElementById(id).style.display = '';
else if (condition == 'hide')
document.getElementById(id).style.display = 'none';
}
Hope this practical example will help someone.
Thanks
If you like this article, subscribe to our
RSS Feed. You can also
subscribe via email to our Interview Questions, Codes and Forums section.