Related Posts Plugin for WordPress, Blogger...

About

Follow Us

Saturday, 28 February 2015

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 :&nbsp;&nbsp; <asp:TextBox ID="txtBankName" runat="server"></asp:TextBox><br />
                City: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:TextBox ID="txtChequeNumber" runat="server"></asp:TextBox>
            </div>
        </fieldset>
    </div>
    </form>
</body>


</html>
Categories: ,

0 comments:

Post a Comment