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

출처 : http://www.dotnetfunda.com/articles/article72.aspx

내가 만든 샘플 코드 링크 : 

getValue_ServerControls_Javascript.aspx

신규 Web Form 에 스크립트와 html만 복사하면 됨.

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>

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

}