How to get value from TextBox, RadioButtonList, DropDownList, CheckBox through JavaScript

SheoNarayan
Posted by in JavaScript category on for Intermediate level | Views : 494541 red flag
Rating: 4 out of 5  
 7 vote(s)

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>


Get video tutorials of hundreds of ASP.NET Tips and Tricks - http://www.itfunda.com/aspnet-how-to-tips-and-tricks/Show/50

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
Page copy protected against web site content infringement by Copyscape

About the Author

SheoNarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com

Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Posted by: Phanisri on: 8/18/2009
Hi
good article..
can you please help me?
master page and content page, external js file concept how to access the server controls in .js file.
Please help me...
Posted by: SheoNarayan on: 8/18/2009
If you mean you want to use the value of Server control into .js file you can do that in following way.

In the .aspx page write
var formElement = '<%=YourServerControl.ClientID %>'

In the .js file use formElement variable and this should work.

Thanks
Posted by: Nainu on: 4/7/2011 | Points: 25
Hi Sir
I have a problem in selecting one checkbox at a time among three checkboxes in the grid columns.
I have written the javascript function as below.
if (col.Index == 4) {
cell04 = oRow.getCell(4);
cell05 = oRow.getCell(5);
cell06 = oRow.getCell(6);
if (cell04.getValue() == true) {
cell05.setValue(false);
if (cell06 != null) {
if (cell06.getValue() == true) {
cell06.setValue(false);
}
}
}
else if (cell05.getValue() == false && cell06.getValue() == false) {
if (cell04.getValue() == false) {
cell04.setValue(true)
}
}
}
else if (col.Index == 5) {
cell04 = oRow.getCell(4);
cell05 = oRow.getCell(5);
cell06 = oRow.getCell(6);

if (cell05.getValue() == true) {
cell04.setValue(false);
if (cell06 != null) {
if (cell06.getValue() == true) {
cell06.setValue(false);
}
}
}
else if (cell04.getValue() == false && cell06.getValue() == false) {
if (cell05.getValue() == false) {
cell05.setValue(true)
}
}

}
else if (col.Index == 6) {
cell04 = oRow.getCell(4);
cell05 = oRow.getCell(5);
cell06 = oRow.getCell(6);

if (cell06.getValue() == true) {
if (cell04.getValue() == true) {
cell04.setValue(false)
}
if (cell05.getValue() == true) {
cell05.setValue(false)
}

}
else if (cell04.getValue() == false && cell06.getValue() == false) {
cell04.setValue(true)
}
}
}
problem & Requirement:Firsttime it behaves properly.But later If I have ticked cell 06 and now I want to check cell 05 it is not selecting cell 05.Instead it is selecting cell04 and then on next click on cell 05 selects 05.Anyway by default cell 04 will be checked always and it will be changed upon selection.(at a time one should be selected).
Please suggest me on this regarding.
Posted by: Susanthampy on: 5/31/2011 | Points: 25
good....
Posted by: Mourya on: 9/10/2011 | Points: 25
@Nainu,

what is your actual requirement , ellobrate it in detail.
it wil be easier for all to help you out.
if possible post a screen shot of you gridview.

Thanks
Mourya
Posted by: Varung on: 12/5/2011 | Points: 25
we can use OnClientClick event for server control button to call javascript function if am not wrong.....
example:
<asp:Button ID="btn" runat="server" OnClientClick ="javascript:functionname/>

an right?????
Posted by: Bhupentiwari on: 6/26/2012 | Points: 25
very good artcle
Posted by: Yan321 on: 7/6/2012 | Points: 25
very nice article thanks please post more like this.
Posted by: Bhupentiwari on: 9/28/2012 | Points: 25
good article please post for jquery also

Login to post response

Comment using Facebook(Author doesn't get notification)