This
is mostly required in our application to hide content on the basis of some
condition i.e. on radiobutton list or check box. I have explained the example
of check box in my previous article.
In this article I will explain
how to Show & Hide controls or DIV
on RadioButtonList selection in asp.net using jQuery.
Example: In this example user has to select the Nationality i.e.
Indian or Others. If user selects the option of “others”, then user has to enter
details like country and city. No information is needed in case of “Indian”
option. So in case of “Others” we can make the textbioxes to enter Country name
and city name 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.
Source Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" 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: 370px;">
<legend><strong>Show/Hide
Div Content On RadioButton Check</strong></legend>
<br />
<strong>Nationality</strong>
<br />
<br />
<asp:RadioButtonList ID="rblPaymentMode" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Text="Indian" Value="1"></asp:ListItem>
<asp:ListItem Text="Others" Value="2"></asp:ListItem>
</asp:RadioButtonList>
<br />
<div id="dvShowHide" style="display:none;">
Country :
<asp:TextBox ID="txtBankName"
runat="server"></asp:TextBox><br />
City: <asp:TextBox ID="txtChequeNumber"
runat="server"></asp:TextBox>
</div>
</fieldset>
</div>
</form>
</body>
</html>
0 comments:
Post a Comment