Test your technical skills online, appear in Virtual Interview and be ready for job!
Twitter Twitter LinkedIn YouTube Google
Be Interview ready ! | Search
Make friends on DotNetFunda.com and expand your network!
Winners

Win Prizes

Announcements
Like us on Facebook
Sponsor
Top Articles Author
Wed, 16-Apr-2014 Authors
All Time Authors
Sourav.Kayal
39750
SheoNarayan
34800
Niladri.biswas
33350

Latest members | More ...


(Statistics delayed by 5 minutes)
Ads

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

SheoNarayan
Posted by under JavaScript category on for Intermediate level | Views : 453666 red flag
If you found plagiarised (copied) or inappropriate content,
please let us know the original source along with your correct email id (to communicate) for further action.
Rating: 4 out of 5
6 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
Found interesting? Add this to:




About the Author

SheoNarayan

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

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.

Comments / Responses
Select text & click toolbar to format. Formatting appears in viewmode only. HTML Tags are not allowed.
Bold Italic Underline Paragraph Title Code  Link 
 Wait ... Processing ..... please wait.

Comment using Facebook