Using if statements in jQuery / JavaScript

Question

First, here is the code for the form I am working on:

<tr><th colspan="2">Please list your family members who have attended William Woods University and their relationship to you.</th></tr>

  <div id="family_member1" name="family_member1">
  <tr>
    <td><label for="family_name1">Name:</label></td>
    <td><input id="family_name1" name="family_name1" type="text" size="32" maxlength="250"></td>
</tr>
<tr>
    <td><label for="family_relationship1">Relationship:</label></td>
    <td><input id="family_relationship1" name="family_relationship1" type="text" size="32" maxlength="250"></td>
</tr>
</div>

<div id="family_member2" name="family_member2">
  <tr>
    <td><label for="family_name2">Name:</label></td>
    <td><input id="family_name2" name="family_name2" type="text" size="32" maxlength="250"></td>
</tr>
<tr>
    <td><label for="family_relationship2">Relationship:</label></td>
    <td><input id="family_relationship2" name="family_relationship2" type="text" size="32" maxlength="250"></td>
</tr>
</div>

<div id="family_member3" name="family_member3">
  <tr>
    <td><label for="family_name3">Name:</label></td>
    <td><input id="family_name3" name="family_name3" type="text" size="32" maxlength="250"></td>
</tr>
<tr>
    <td><label for="family_relationship3">Relationship:</label></td>
    <td><input id="family_relationship3" name="family_relationship3" type="text" size="32" maxlength="250"></td>
</tr>
</div>

 <tr>
    <td colspan="2">
        <input type="button" id="add_family_member" name="add_family_member" class="btn" value="Add Another Family Member">

        <!--

        This button will need to function like the "Add Another Member" button on this page:
        https://www.williamwoods.edu/eforms/student_life/Stone-Campbell_Apartment_Application.aspx

        -->

    </td>
</tr>

I have some table rows that need to be hidden by default. These rows are inside of divs named "family_member2" and "family_member3" ("family_member1" is visible by default).

I need to have it set up so that, when the user first accesses the form, only family_member1 is visible. Then, if they click the "add_family_member" button, family_member2 will appear, and, if they click it again, family_member3.

Once family_member3 has been made visible, the button will probably need to be hidden, since we only want them to enter up to three family members.

So, to start off, I would need something like this to hide family_member2 and 3 by default:

    function hideAdditionalFamilyMembers() {
    $( "#family_member2" ).hide();
    $( "#family_member3" ).hide();
    }

    //hide on initial load
    hideAdditionalFamilyMembers();

Now, when the user clicks the "add_family_member" button, I need it to:

1.) Check to see if any of the additional family_member fields are visible (family_member2 or family_member3).

2.) if family_member2 is not visible, show family_member2, and only family_member2.

3.) if family_member2 is visible, show family_member3.

4.) if family_member3 is visible, hide the add_family_member button.

This is where I get a bit stuck... ^^;

So, I guess I would need something like...

    function showFamilyMember2() {
        $( "#family_member2" ).show();
    }

    function showFamilyMember3() {
        $( "#family_member3" ).show();
    }

    if ( $( "#family_member2" ).hide(); && $( "#family_member3" ).hide(); ) {

        $( "#add_family_member" ).click( showFamilyMember2() );

    } else if ( $( "#family_member2" ).show(); && $( "#family_member3" ).hide(); ) {

        $( "#add_family_member" ).click( showFamilyMember3() );

    } else if ( $( "#family_member3" ).show(); ) {

        $( "#add_family_member" ).hide();

    } else {

    //do nothing

    }

(but surley that's not the way to do it... ^^; )

Any insight would be appreciated. Most likely, the form is going to be rebuilt in .aspx, in which case we can just use < asp:UpdatePanel runat="server" >, but I would still like to know how to do it using jQuery/JavaScript.

Thanks!

Answer 1 · 2015-07-30T19:09:00Z

July 30, 2015 7:09pm

At first reading of your problem I might take this approach (I've simplified the code):

<div id="family_member1" class=""></div>
<div id="family_member1" class="hidden"></div>
<div id="family_member1" class="hidden"></div>

<button id="add_family_member">Add Family Member</button>

... the CSS to hide the fields:

.hidden {
    display: none;
    }

Finally I would use jQuery to select the first element with the class name of "hidden" and then delete that class name (therefore removing the CSS styling):

$( "#add_family_member" ).click(function() {
    $( ".hidden" ).first().removeClass( "hidden" );
});

I put together a quick JSFiddle to show what is going on.

You can add css transitions to make to make them appear in a nice fashion.

Welcome to the Treehouse Community

Looking to learn something new?

William J. Terrell

William J. Terrell

Using if statements in jQuery / JavaScript

1 Answer

Neil Docherty

Neil Docherty

Neil Docherty

Neil Docherty

William J. Terrell

William J. Terrell

Neil Docherty

Neil Docherty

William J. Terrell

William J. Terrell