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 
633458218157640464_SheoNarayan_playingja 


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