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!
Good Post !!!
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.
Sorry about that, part of my message was removed … such as, value=”somevalue” data-id=”6″ …
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> ?>