CODEWITHSUNDEEP
jquery.netasp.net
SmilingLily
SmilingLily

Reputation: 333

What is wrong with this jquery validation code?

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>

Upvotes: 4

Views: 142

Answers (3)

Curtis
Curtis

Reputation: 103378

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');
        }

        });

Upvotes: 2

StefanE
StefanE

Reputation: 7630

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();

        }

        });

    });

Upvotes: 1

jtfairbank
jtfairbank

Reputation: 2307

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();
        }
    });
});

Upvotes: 1

Related Questions