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'; }
No comments:
Post a Comment