Higeath Higeath - 19 days ago 5
Javascript Question

Hide, show input using toggle jquery boolean

I get input from dropdown list and depending on what user chose I want to show/hide different inputs. I have tried using toggle with boolean but it is not responding as it should.

My expectation I send true to toggle then it either shows the input or if it is already shown it stays that way. If I send false it hides or if it is hidden it stays that way.

As you can see both 'Parent' and 'Child' have the first values as true and when I switch from child to parent (the firstname is visible when the site loads) it hides and when I switch to administrator even though it is false it shows.

$(document).ready(function () {
var user = $("[id*=userTypeDD]").val();
$("[id*=userTypeDD]").on("change", function () {
user = $("[id*=userTypeDD]").val();
hideInputFields(user);
});
});

function hideUserInputFields(user) {
if (user == "Child") {
hideInputFields(true, true, false, false, false);
}
if (user == "Parent") {
hideInputFields(true, true, true, true, true);
}
if (user == "Administrator") {
hideInputFields(false, false, false, false, false);
}
}

function hideInputFields(firstNameIsVisible, surnameIsVisible, postcodeIsVisible, telephoneIsVisible, emailIsVisible)
{
$("[id*=firstNameTxt]").closest("tr").toggle(firstNameIsVisible);

}


Markup (ASP.NET)


<asp:DropDownList ID="userTypeDD" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem>Child</asp:ListItem>
<asp:ListItem>Parent</asp:ListItem>
<asp:ListItem>Administrator</asp:ListItem>
</asp:DropDownList>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td class="text-right" style="width: 574px">
<asp:Label ID="firstNameLabel" runat="server" Text="First name: "></asp:Label>
</td>
</tr>
</table>


Edit: It seems to me that it simply toggles TR everytime no matter the boolean value I pass to toggle

Answer

You're calling the wrong function in the on change event of your drop down. Change this...

$("[id*=userTypeDD]").on("change", function () {
        user = $("[id*=userTypeDD]").val();
        hideInputFields(user);
    });

To

$("[id*=userTypeDD]").on("change", function () {
        user = $("[id*=userTypeDD]").val();
        hideUserInputFields(user);
    });

This is why it's best to not name your functions so similarly. Your hideUserInputFields is a misleading name as it is not the function that does that. You would be better of calling it handleUserSelectionChange. Then you would probably not have had this mistake. Your other function name makes sense.