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

Answer 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 🙂