jQuery Tutorial: Hide or Display a Field Based on the Value of Another Field

Gah I know it’s been a while since I’ve posted something and I try to post every month but I’ve been busy programming games for myself and my clients (which is a good thing!). But here’s some yummy coding snippets to make your life easier.

Creating the Form

For this example let’s assume that we have a game which requires parental emails or parental permission to play if the member who is signing up is under 13 years of age* (good ole COPPA). Create an php file with the following contents:

<html>
<head>
    <title>Test Hide/Show Fields</title>
    <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script language="javascript" type="text/javascript" src="showhide.js"></script>
</head>
<body>
    <?php
        //this will show you the values in the form the data when you hit the submit button
        if ($_POST) {
            echo "Form was submitted, here are the form values: <pre>";
            print_r($_POST);
            echo "</pre>";
        }
    ?>
    <form method="POST">
        <p>Name: <input type="text" name="player_name" /></p>
        <p>Email: <input type="text" name="player_email" /></p>
        <p>Age: 
             <select id="age" name="age">
             <?php
                  //sorry but if you're over 30 you're too old to join, lol
                  for ($age = 6; $age <= 30; $age++)
                       echo "<option value="$age">$age</option>
             ?>
             </select>
        </p>
        <div id="parentPermission">
                <p>Parent's Name: <input type="text" name="parent_name" /></p>
                <p>Parent's Email: <input type="text" name="parent_email" /></p>
                <p>You must have parental permission before you can play.</p>
        </div>
        <p align="center"><input type="submit" value="Join Game!" /></p> 
 </form>
</body>
</html>

Writing the jQuery Code

Now all that’s left is to write the code that will show (or hide) the fields we want to display when the user has selected a specific value in our selection drop down list. Create a file called showhide.js and save it to the same location as the form you created in the previous step.

/**
* File: js/showhide.js
* Author: design1online.com, LLC
* Purpose: toggle the visibility of fields depending on the value of another field
**/
$(document).ready(function() {
    toggleFields(); //call this first so we start out with the correct visibility depending on the selected form values
   //this will call our toggleFields function every time the selection value of our underAge field changes
    $("#age").change(function() { toggleFields(); });

});
//this toggles the visibility of our parent permission fields depending on the current selected value of the underAge field
function toggleFields()
{
    if ($("#age").val() < 13)
        $("#parentPermission").show();
    else
        $("#parentPermission").hide();
}

Summary

Now every time you select an age below 13 you will see the parent permission form fields displayed. If you select an age 13 or older the parent permission fields will disappear. This is useful if you have conditional data you want to collect based on a specific value or selection response. Hope it helps!

*Note

The age field in this example is just to show you how you can show/hide fields depending on the value selected. If you intend to store the age of a person in your database you need to store their date of birth since age changes every year.

Demo and working code

Try our JSFiddle demo to see this code in action!

4 Responses

  1. Jennifer says:

    Thanks so much for posting. If you were to use a data attribute instead of a value such as , how would you go about doing that in the jQuery? if ($(“#age”).data(‘id’) < 13) or if ($("#age").attr('data-id') < 13) doesn't seem to work. Thanks for your help.

  2. Jennifer says:

    Sorry about that, part of my message was removed … such as, value=”somevalue” data-id=”6″ …

    • Jade says:

      First of all you should make sure that it’s interpreting it as an integer value. Also I would recommend a better description for your data value. Data-id doesn’t really tell you what the data is for but data-age does:

      if (parseInt($("#age").data("age")) < 13)

      Then your select should look like this, the data needs to go on the options and not on the select tag:

       
        <?php
                        //sorry but if you're over 30 you're too old to join, lol
                        for ($age = 6; $age <= 30; $age++)
                            echo "<option value="$age" data-age="$age">$age </option>
        ?>
      

Leave a Reply