Please disable your adblock and script blockers to view this page
 

jQuery to Show/Hide controls placed in Div based on Asp.net RadioButtonList selected value

Show or hide div containing control based on radiobuttonlist selected valueIntroduction: 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.


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 :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <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."
Previous
Next Post »

2 comments

Click here for comments
Anonymous
admin
July 27, 2014 ×

Ver structured code. Descriptive contents. Thanks.

REGARDS
Partho

Reply
avatar
July 30, 2014 ×

Thanks Partho..i am glad you found this article useful..Stay connected and keep reading..:)

Reply
avatar

If 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.. ConversionConversion EmoticonEmoticon