asked on

How can I toggle textbox/label visibility without postback?

I am trying to toggle the visibility of a textbox from a value in dropdown. If the value is something other than "None", I would like textbox and it' slabel (Building Name and txtBuilding_Name) to be visible. How can I best do that using jquery or javascript so I don't have to call a postback?

Please see the attached code attempts.

<tr valign="top">
                <td class="tdLeft">
                    Access Timeframe:
                </td>
                <td class="tdRight">
                    <asp:DropDownList ID="ddlAccessTimeframe" runat="server" CssClass="textEntry">
                    </asp:DropDownList>
                </td>
            </tr>
            <tr valign="top">
                <td class="tdLeft">
                    Building Name:
                </td>
                <td class="tdRight">
                    <asp:TextBox ID="txtBuilding_Name" runat="server" MaxLength="30" CssClass="textEntry" />
                    <asp:CustomValidator ID="CustomValidator1" SetFocusOnError="true" runat="server"
                        ClientValidationFunction="AccessTimeframe_RequiredCheck" ErrorMessage="Required"
                        ValidateEmptyText="true" CssClass="failureNotification" ControlToValidate="txtBuilding_Name"></asp:CustomValidator><br />
                </td>
            </tr>

Open in new window

function AccessTimeframe_RequiredCheck(sender, args) {

            if ($('select[id$=ddlAccessTimeframe] :selected').text() == 'None') {
                if (args.Value.length == 0) {
                    args.IsValid = false;
                    return;
                }
            }
            args.IsValid = true;
        }

Open in new window

if ($("#<%=txtBuilding_Name.ClientID%>").val().length <= 0)
                $("#divHideBuildingName").hide('fast');


            $("#<%=ddlAccessTimeframe.ClientID %>").change(function () {
                var selectText;
                selectText = $('select[id$=ddlAccessTimeframe] :selected').text();

                if (selectText == 'None') {
                    $("#divHideBuildingName").show('fast');
                }
                else
                    $("#divHideBuildingName").hide('fast');
            });

Open in new window

leakim971

What about :

<script>
$(document).ready(function() {

            $("#<%= ddlAccessTimeframe.ClientID %>").change(function () {
                var selectText = $(this).text();

                if (selectText == 'None') { // double check the case
                    $("#<%= divHideBuildingName.ClientID %>").closest("tr").show();
                }
                else {
                    $("#<%= divHideBuildingName.ClientID %>").closest("tr").hide();
                }
            });

})
</script>

Open in new window

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

devnewbee

ASKER

Thank you.