JSGetAspxControlValue

出处：http://www.dotnetfunda.com/articles/article72.aspx
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.


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" οnclick="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" οnclick="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" οnclick="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" οnclick="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" οnclick="ToggleFollowingText('table1')" />

<input type="button" value="Show Only" οnclick="ShowOrHide('show', 'table1')" />

<input type="button" value="Hide Only" οnclick="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';



}


This picture is the UI screenshots of the the code I am going to present in this article