Introduction:
In this article i am going to explain How to Show ,Hide and clear out the controls/contents
placed inside div tag according to RadioButtonList selected item in asp.net
using jQuery.
In previous articles i explained jQuery to Show Hide controls placed inside Div based on Checkbox selection and Show/Hide Div content based on DropDownList selected value and Show image preview before uploading through asp.net fileupload control using jQuery and Print page content placed inside DIV tag with print preview using JavaScript and jQuery to enlarge thumbnail image in slider on mouse over in asp.net and jQuery stylish dropdown menu example like Facebook,Linkedin
Description: One of the common requirement
while working on asp.net projects is to show or hide controls e.g. textbox,
dropdownlist or other controls based on RadioButtonList selected value.
For example: Here in this example user has to select the payment mode either cash or cheque. If user selects cheque then we need to get
the bank name and cheque number details from user but if he selects cash then
we don't need to get any details. So in this case we can make the controls for
inputting bank name and cheque number to appear and disappear at run time by
placing them in DIV tag and using jQuery we can hide or unhide the DIV
according to the RadioButtonList selected item as shown in demo image above.
Implementation: Below is the HTML Source of the page having the
controls and jQuery script required for this demonstration.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="//code.jquery.com/jquery-1.11.1.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#<%=rblPaymentMode.ClientID %>').click(function () {
var SelectedValue = $('#<%=rblPaymentMode.ClientID
%>
input[type=radio]:checked').val();
if (SelectedValue == 1) {
//If
cash is selected then hide the Div
$('#dvShowHide').css("display", "none");
//or
you can simply use jQuery hide method to hide the Div as below:
//$('#dvShowHide').hide();
}
else {
//If
Cheque is selected then show the Div
$('#dvShowHide').css("display", "block");
//or
you can simply use jQuery show method to show the Div as below:
//$('#dvShowHide').show();
//Clear
textboxes
$('#<%=txtBankName.ClientID
%>').val('');
$('#<%=txtChequeNumber.ClientID
%>').val('');
//Set focus in bank name textbox
$('#<%=txtBankName.ClientID
%>').focus();
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset style="width: 270px;">
<legend>Show/Hide Div Content</legend>
Payment Mode <asp:RadioButtonList
ID="rblPaymentMode"
runat="server"
RepeatDirection="Horizontal">
<asp:ListItem Text="Cash" Value="1"></asp:ListItem>
<asp:ListItem Text="Cheque"
Value="2"></asp:ListItem>
</asp:RadioButtonList>
<div
id="dvShowHide"
style="display:none;">
Bank Name :
<asp:TextBox ID="txtBankName"
runat="server"></asp:TextBox><br />
Cheque Number: <asp:TextBox ID="txtChequeNumber" runat="server"></asp:TextBox>
</div>
</fieldset>
</div>
</form>
</body>
</html>
Now over to you:
" I hope you have got how to show or hide the controls placed in Div based on RadioButtonList selected item using jQuery in Asp.Net and
If you like my work; you can appreciate by leaving your comments, hitting
Facebook like button, following on Google+, Twitter, Linked in and Pinterest,
stumbling my posts on stumble upon and subscribing for receiving free updates
directly to your inbox . Stay tuned and stay connected for more technical
updates."
2 comments
Click here for commentsVer structured code. Descriptive contents. Thanks.
ReplyREGARDS
Partho
Thanks Partho..i am glad you found this article useful..Stay connected and keep reading..:)
ReplyIf you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..