hiding and showing div using Jquery

Question

I am using c# for programming, please see below code:

<p><b>
            <%=ResourceFile.GetResourceString("c_FreeLiveOnlineProgramInterest")%>
        </b>&nbsp;<font color="red">*</font>&nbsp;
        <br>
        <asp:dropdownlist id="ddl_ProgramInterest" tabIndex="3" Runat="server"></asp:dropdownlist><br>
        <asp:requiredfieldvalidator id="reqv_ddl_ProgramInterest" runat="server" Display="Dynamic" ControlToValidate="ddl_ProgramInterest"></asp:requiredfieldvalidator></p>
    <div style="DISPLAY: none" id="divOther" runat="server">
        <p><b>
                <%=ResourceFile.GetResourceString("c_FreeLiveOnlineProgramInterestOther")%>
            </b>
            <br>
            <asp:textbox id="txt_Other" tabIndex="6" Width="155" runat="server"></asp:textbox><br>
            <asp:requiredfieldvalidator id="reqv_txt_Other" runat="server" Display="Dynamic" ControlToValidate="txt_Other"></asp:requiredfieldvalidator></p>
    </div>

Above you can see that I have a dropdown "Program of Interest" and above dropdown have two values 'Live' and 'Other', I want when user select other then the "divOther' will appear or will be hidden as well same for requirefieldvalidator 'reqv_txt_Other", I have written below code in codebehind, its working fine but on server side.

private void ddl_ProgramInterest_SelectedIndexChanged(object sender, System.EventArgs e)
        {
            if (ddl_ProgramInterest.SelectedValue == ResourceFile.GetResourceString("c_FreeLiveOnlineProgramInterestValue2"))
            {           
                divOther.Style.Add("display","block");
                reqv_txt_Other.Enabled = true;
            }
            else
            {           
                divOther.Style.Add("display","none");
                reqv_txt_Other.Enabled = false;
                txt_Other.Text="";
            }
        }

Please suggest how can do using JQuery!

Thanks

Nick Craver · Accepted Answer · 2010-05-12 12:06:55Z

1

You can do it in jQuery like this:

<script type="text/javascript">
  $(function() {
    $("#<%=ddl_ProgramInterest.ClientID%>").change(function() {
      var other = $(this).val() === '<%=ResourceFile.GetResourceString("c_FreeLiveOnlineProgramInterestValue2")%>';
      $("#divOther").toggle(other);
      $("#<%=reqv_txt_Other.ClientID%>").attr("enabled", other);    
    }).change(); //fire it on load
  });
</script>

Just remove the runat="server" from the divOther as it's no longer needed. The solution above needs to be in your page to work, otherwise the server tags won't resolve (and the resource string has to be in the page either way).

If you want to find the elements in a (opinion here) cleaner way, give them a class, for example give the drop down CssClass="interest" and change that jQuery selector from $("#<%=ddl_ProgramInterest.ClientID%>") to $(".interest"), a bit cleaner :)

answered May 12, 2010 at 12:06

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

1 Comment

Manoj Singh Over a year ago

Thanks! Nick I just did some modification and it worked for me!

Collectives™ on Stack Overflow

hiding and showing div using Jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related