How to get value from TextBox, RadioButtonList, DropDownList, CheckBox 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.
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>

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



        



        }