What is wrong with this jquery validation code?

Question

The code is supposed to hide the textbox when the page loads and make it visible only when the user selects Other.

<script type="text/javascript">
        $(document).ready(function () {
        $('#ddlMajor').change(function () {
        if ($(this).val() == 'Other') {
                //                $('#txtOther').show();
         $('#txtOther').css('display', 'inline');
         }
        else {
                //                $('#txtOther').hide();
        $('#txtOther').css('display', 'block');
        }

        });

});
</script>

<asp:TextBox runat="server" ID="txtOther" style="display:none;" > </asp:TextBox>

<asp:DropDownList runat="server" ID="ddlMajor">
                 <asp:ListItem Value="Accounting">Accounting</asp:ListItem> 
                 <asp:ListItem Value="Management">Management</asp:ListItem>
                 <asp:ListItem Value="Other">Other</asp:ListItem>
</asp:DropDownList>

I don't think that the ID that you set in ASP:dropdownList is the same as the ID that's generated in the resulting HTML. What do you get when you look at this in a tool like Firebug or IE debugger? — Brian Hoover
– Brian Hoover, Commented Oct 18, 2011 at 14:46
Display Inline and Display Block are both going to be visible. If you want to hide it you would use display none. — Dismissile
– Dismissile, Commented Oct 18, 2011 at 14:46
Remember that if your ASP.NET code is running within a master page or user control, etc., the ID you give a control may not be the actual ID output to the page -- .NET will often add a prefix. You can use the clientId property to insert the correct IDs. — Jacob Mattison
– Jacob Mattison, Commented Oct 18, 2011 at 14:47
Hi Dismissile - This is the answer. I need to make the display:none Thank you. — SmilingLily
– SmilingLily, Commented Oct 18, 2011 at 15:37

Curtis · Accepted Answer · 2011-10-18 15:16:56Z

2

As you are using a Server Side control the ID will be re-rendered. You could put code blocks in your javascript, but I would recommend using a class instead:

<asp:TextBox runat="server" ID="txtOther" style="display:none;" CssClass="txtOther"> </asp:TextBox>

<asp:DropDownList runat="server" ID="ddlMajor" CssClass="ddlMajor">
                 <asp:ListItem Value="Accounting">Accounting</asp:ListItem> 
                 <asp:ListItem Value="Management">Management</asp:ListItem>
                 <asp:ListItem Value="Other">Other</asp:ListItem>
</asp:DropDownList>

 $('.ddlMajor').change(function () {
...
});

I also believe your CSS display values are incorrect. Try this:

 $(document).ready(function () {
        $('.ddlMajor').change(function () {
        if ($(this).val() == 'Other') {
         $('.txtOther').css('display', 'block');
         }
        else {
        $('.txtOther').css('display', 'none');
        }

        });

Or if you do not want to change Markup, use ClientID. Note: This will only work when youve got the javascript contained within the .aspx file

 $(document).ready(function () {
        $('#<%= ddlMajor.ClientID %>').change(function () {
        if ($(this).val() == 'Other') {
         $('#<%= txtOther.ClientID %>').css('display', 'block');
         }
        else {
        $('#<%= txtOther.ClientID %>').css('display', 'none');
        }

        });

edited Oct 18, 2011 at 15:16

answered Oct 18, 2011 at 14:45

Curtis

104k69 gold badges280 silver badges359 bronze badges

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

4 Comments

StefanE Over a year ago

Should use <%= ddlMajor.ClientID %> etc. rather then using CssClass to point at objects that you might need for what it should be used for.

Curtis Over a year ago

Why is this? Do you have a reference? What if the javascript is contained in a .js file? How would you do this?

StefanE Over a year ago

If separating the JS from the aspx file you can still have JS variables to set the IDs of Server Controls. What I'm just saying is that using CssClass to solve this problem might cause problems later on when need to use CssClass for its purpose. Coder and Web Designer is not always the same person :)

Curtis Over a year ago

Fair point @StefanE, I forget that sometimes the markup has been committed and cannot be changed freely. Cheers

jtfairbank · Accepted Answer · 2011-10-18 14:49:49Z

1

Your issue is that when you try to hide the textbox, you set its display to block. JQuery uses the display property display: none to hide the textbox. So what you're doing is overwriting jQuery's hiding. Try this:

$(document).ready(function () {
    $('#ddlMajor').change(function () {
        $('#txtOther').css('display', 'inline');
        if ($(this).val() == 'Other') {
            $('#txtOther').show();
        } else {
            $('#txtOther').hide();
        }
    });
});

answered Oct 18, 2011 at 14:49

jtfairbank

2,3072 gold badges23 silver badges33 bronze badges

2 Comments

Curtis Over a year ago

This isn't the only issue. jQuery won't find any #ddlMajor elements as this will be re-rendered client side. See my answer.

jtfairbank Over a year ago

Ah, I didn't realize ASP would rewrite the id tag. Thanks for letting me know!

Curtis · Accepted Answer · 2011-10-18 15:13:53Z

1

You don't need to use classes as references but as the server controls will have a different ID when rendered you can use inline( <%= ddlMajor.ClientID %> ) instead to get the proper ID:

For example:

<script type="text/javascript">
    $(document).ready(function () {
      $("#<%= ddlMajor.ClientID %>").change(function () {
        if ($(this).val() == 'Other') {
                $('#<%= txtOther.ClientID %>').show();

         }
        else {
                $('#<%= txtOther.ClientID %>').hide();

        }

        });

    });

edited Oct 18, 2011 at 15:13

Curtis

104k69 gold badges280 silver badges359 bronze badges

answered Oct 18, 2011 at 14:55

StefanE

7,64010 gold badges51 silver badges75 bronze badges

3 Comments

Curtis Over a year ago

This doesn't take into account the issue with the CSS display, or the fact #txtOther will be rerendered too.

StefanE Over a year ago

Well, using class as in your answer is the wrong recommendation when working with jQuery and ASP.NET.. I pointed out the problem of that the javascript code he have will never be executed unless having the correct id.

Curtis Over a year ago

I still wouldn't say its a correct answer to the initial question.

Collectives™ on Stack Overflow

What is wrong with this jquery validation code?

3 Answers 3

4 Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related