jquery function that hides/displays text based on a drop down list

Question

Hi everyone and thanks in advance for the help. So I have been learning asp.net with C# over the past two weeks, and feel like I get it pretty well, but I am having some trouble with jQuery functionality. I was trying to set up a form that would have a drop down list and depending on the option selected a different account creation form would be displayed within its panel. I used the following code:

 <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/FrontEnd.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Login_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="CPMainContent" Runat="Server">
    <asp:DropDownList ID="AccountTypeDDL" runat="server" >
        <asp:ListItem>Resident Account</asp:ListItem>
        <asp:ListItem>Student Account</asp:ListItem>
        <asp:ListItem>University Account</asp:ListItem>
    </asp:DropDownList>

    <asp:Panel ID="CreateStudentAccountPanel" runat="server" >
        <asp:Label ID="Label1" runat="server" Text="Create Student Account"></asp:Label>
    </asp:Panel>

    <asp:Panel ID="CreateUniversityAccountPanel" runat="server">
        <asp:Label ID="Label2" runat="server" Text="Create University Account"></asp:Label>
    </asp:Panel>

    <asp:Panel ID="CreateResidentAccountPanel" runat="server">
        <asp:Label ID="Label3" runat="server" Text="Create Resident Account"></asp:Label>
    </asp:Panel>
</asp:Content>

<asp:Content ID="ScriptContent" ContentPlaceHolderID="CPClientScript" runat="server">
    <script type="text/javascript">


        $(function ()
        {
            alert('hi');
            //This hides all initial textboxes
            $('#CreateStudentAccountPanel').hide();
            $('#CreateUniversityAccountPanel').hide();
            $('#CreateResidentAccountPanel').hide();



            $('#AccountTypeDDL').change(function ()
            {
                //This saves some time by caching the jquery value
                var val = $(this).index.toString;
                //this hides any boxes that the previous selection might have left open
                $('Panel').hide();
                //This just opens the ones we want based off the selection
                switch (val)
                {
                    case '0':
                        $('#CreateResidentAccountPanel').show();
                        $('#CreateUniversityAccountPanel').hide();
                        $('#CreateStudentAccountPanel').hide();
                       break;
                    case '1':
                        $('#CreateStudentAccountPanel').show();
                        $('#CreateResidentAccountPanel').hide();
                        $('#CreateUniversityAccountPanel').hide();
                        break;
                    case '2':
                        $('#CreateUniversityAccountPanel').show();
                        $('#CreateStudentAccountPanel').hide();
                        $('#CreateResidentAccountPanel').hide();
                        break;

                }
            });

        });
    </script>
</asp:Content>

can anyone tell my why my jQuery code is failing to hide the text within the nonselected panels? I am lost. Thanks again.

edit sorry messed up that last post:

`code`
 var val = $('#<= AccountTypeDDL.ClientID %>').index;
                //this hides any boxes that the previous selection might have left open
                $('Panel').hide();
                //This just opens the ones we want based off the selection
                switch (val)
                {
                    case 0:
                        $('#<%= CreateResidentAccountPanel.ClientID %>').show();
                        $('#<%= CreateStudentAccountPanel.ClientID %>').hide();
                        $('#<%= CreateUniversityAccountPanel.ClientID %>').hide();
                       break;
                    case 1:
                        $('#<%= CreateResidentAccountPanel.ClientID %>').hide();
                        $('#<%= CreateStudentAccountPanel.ClientID %>').show();
                        $('#<%= CreateUniversityAccountPanel.ClientID %>').hide();
                        break;
                    case 2:
                        $('#<%= CreateResidentAccountPanel.ClientID %>').hide();
                        $('#<%= CreateStudentAccountPanel.ClientID %>').hide();
                        $('#<%= CreateUniversityAccountPanel.ClientID %>').show();
                        break;

code

Suave Nti · Accepted Answer · 2012-07-19 16:49:20Z

2

Have you tried using ClientID

 $('#<%= CreateStudentAccountPanel.ClientID %>').hide();
 ....

answered Jul 19, 2012 at 16:49

Suave Nti

3,76713 gold badges57 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Christian Over a year ago

Thank you! that makes sense. But.. while that worked for hiding the initial panels, even after I changed the syntax within the switch statement, the drop down list does not effectively hide/show the different panels.

Suave Nti Over a year ago

@Christian : Can you update your latest code in your question?

Suave Nti Over a year ago

@Christian : So which part isnt working inthe updated code ? what is the value of this var val ?

Christian Over a year ago

var val, i assumed was storing the selected index of the account drop down list. The switch statement was supposed to hide the panels that don't correspond with the selected index and display the panel that does. However changing the selected item on the drop down list in the page does nothing at this juncture.

Suave Nti Over a year ago

@Christian : You are getting my question wrong..what is the value in that variable ? check by placing an alert or debug

|

John - Not A Number · Accepted Answer · 2012-07-20 06:46:39Z

1

Load up the page in a good JavaScript debugger such as FireBug, and then try using the console to hide one if the sections by running this line:

$('#CreateResidentAccountPanel').hide()

If that doesn't work, use FireBug's html inspector to see what is the actual ID for the panel div. Asp.Net tends to add it's own junk ID's unless you explicitly tell it not to. To avoid this, add a ClientIDMode="Static" attribute into the panel tag definition:

<asp:Panel ID="CreateResidentAccountPanel" ClientIDMode="Static" runat="server">
    <asp:Label ID="Label3" runat="server" Text="Create Resident Account"></asp:Label>
</asp:Panel>

I generally use Static for all ID's I know I'll be manipulating via jQuery - it makes life much simpler.

answered Jul 20, 2012 at 6:46

John - Not A Number

6494 silver badges9 bronze badges

1 Comment

John - Not A Number Over a year ago

Forgot to add, using Static ClientIdMode also works for bigger projects where you have the JavaScript in its own file, whereas the #<%= CreateUniversityAccountPanel.ClientID %> type syntax only works where you have in the .aspx file.

bevacqua · Accepted Answer · 2012-07-19 16:51:16Z

0

I think you should use something like #<%= CreateUniversityAccountPanel.ClientID %> as your selectors.

answered Jul 19, 2012 at 16:51

bevacqua

48.8k56 gold badges176 silver badges287 bronze badges

Collectives™ on Stack Overflow

jquery function that hides/displays text based on a drop down list

3 Answers 3

9 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related