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

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.