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" 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';

       

        }


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