Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
William J. Terrell
17,403 PointsWorking with Interactive Forms
I wanted to create another form to automate the process of collecting information for our University Ambassadors, but I'm a bit stuck...
I'm using a table for the layout of the form (though I know this may make some of the more seasoned developers cringe). In this table/form, there are two sets of two rows a piece that I would like to be hidden by default. Their display state will be determined by the answer to this question: "Are you an international student?" If the user selects "Yes", they are asked to fill in their hometown and home country, if they say "No", they are asked for their hometown and state. (so one might be "Dublin, Ireland", another might be "Austin, Texas").
I am using the working "switch/case" JavaScript code from this question as a reference, but it doesn't seem to be working. Both sets of rows are visible by default on this form, and I'm not sure why...
What's more, I've tried putting divs around those two sets of rows, but that seems to really mess-up the layout for some reason (it puts both sets of rows all on one row).
The HTML and JavaScript that I am currently working with is as follows. I've commented out the divs due to the layout issue.
<p>Congratulations on becoming a William Woods University Ambassador!</p>
<p>Please provide us with the following information for your UA profile:</p>
<form method="post" name="new_ua_form" id="new_ua_form">
<table class="responsive-table">
<tbody>
<tr>
<td><label for="name">Name:</label></td>
<td><input name="name" id="name" size="50" value="" type="text"/></td>
</tr>
<tr>
<td><label for="international_or_not">Are you an international student?</label></td>
<td style="text-align: left;">
<input type="radio" name="international_or_not" value="Yes" id="yes_international" />
<label for="yes_international" class="radio">Yes</label><br/>
<input type="radio" name="international_or_not" value="No" id="not_international" />
<label for="not_international" class="radio">No</label><br/>
</td>
</tr>
<!-- If Yes to International -->
<!-- <div name="int_info" id="int_info"> -->
<tr>
<td><label for="international_hometown">Hometown:</label></td>
<td><input name="international_hometown" id="international_hometown" size="50" value="" type="text"/></td>
</tr>
<tr>
<td><label for="country">Country:</label></td>
<td><input name="country" id="country" size="50" value="" type="text"/></td>
</tr>
<!-- </div> -->
<!-- If No to International -->
<!-- <div name="US_info" id="US_info"> -->
<tr>
<td><label for="hometown">Hometown:</label></td>
<td><input name="hometown" id="hometown" size="50" value="" type="text"/></td>
</tr>
<tr>
<td><label for="state">State:</label></td>
<td><input name="state" id="state" size="50" value="" type="text"/></td>
</tr>
<!-- </div> -->
<tr>
<td><label for="major">Major(s):</label></td>
<td><input name="major" id="major" size="50" value="" type="text"/></td>
</tr>
<tr>
<td><label for="minor">Minor(s):</label></td>
<td><input name="minor" id="minor" size="50" value="" type="text"/></td>
</tr>
<tr>
<td><label for="classof">Expected Year of Graduation:</label></td>
<td><input name="classof" id="classof" size="50" value="" type="text"/></td>
</tr>
<tr>
<td><label for="why_wwu">What made you choose William Woods?</label></td>
<td><textarea name="why_wwu" id="why_wwu" rows="5" columns="50"></textarea></td>
</tr>
<tr>
<td><label for="campus_involvement">What organizations are you involved in at William Woods?</label></td>
<td><textarea name="campus_involvement" id="campus_involvement" rows="5" columns="50"></textarea></td>
</tr>
</tbody>
</table>
<input type="submit" value="Submit Information"/>
</form>
<script>
function hideNationality() {
$("#int_info").hide();
$("#US_info").hide();
}
// hide on initial load
hideNationality();
$('[name="international_or_not"]').change( function () {
hideNationality();
switch($('[name="international_or_not"]:checked').val()) {
case "Yes":
$("#int_info").show();
break;
case "No":
$("#US_info").show();
break;
default:
console.log("default -- no action");
}
});
</script>
Any insight or assistance would be appreciated. :)
As a secondary thought/question, not having to do with the code or functionality of the form; I know that in the U.S., it is sometimes ill-advised/illegal(?) to ask questions that may indicate one's ethnicity.
This isn't being used for employment, though; the students will already have been accepted into the University. This is just to collect information to put on their bios on the website, but if anyone would feel inclined to offer some perspective on that, please feel free to do so. :)
Thanks!
2 Answers
jobbol
Full Stack JavaScript Techdegree Student 19,117 PointsIt appears some of the table CSS is messing with the way the HTML gets displayed. It might have to do with the collapsing margins. It's a really odd behavior maybe someone else with more experience can shed some light on it.
Anyways I simplified your code down to that one part dealing with the yes/no question, and I got some interesting results.
This is your original code. I colored the background on the individual divs. Even without hideNationality() nothing gets colored. However, ticking the radio buttons causes the paragraphs to change.
http://codepen.io/wryn/pen/rOMoey
Here the only thing I did was remove the table and tbody tags which seemed to fix the problem. So now the questions are colored, and ticking the buttons causes things to change normally.
LaVaughn Haynes
12,397 PointsHere is an alternative if you are interested. You can add classes to the rows that you want to toggle the visibility of, and do so when the radio button changes. See my example below.
As for the other question, at my job we do ask those types of questions on relevant forms, but we always make it optional. An example might be that we need diverse panels for our conferences so we might let them know when they apply that providing that information would help us keep programs diverse.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Toggle</title>
<style>
.hidden{
display: none;
}
</style>
</head>
<body>
<table class="responsive-table">
<tbody>
<!-- radio buttons -->
<tr>
<td><label for="international_or_not">Are you an international student?</label></td>
<td style="text-align: left;">
<input type="radio" name="international_or_not" value="Yes" id="yes_international" />
<label for="yes_international" class="radio">Yes</label><br/>
<input type="radio" name="international_or_not" value="No" id="not_international" />
<label for="not_international" class="radio">No</label><br/>
</td>
</tr>
<!-- If Yes to International -->
<tr class="international hidden">
<td><label for="international_hometown">Hometown:</label></td>
<td><input name="international_hometown" id="international_hometown" size="50" value="" type="text"/></td>
</tr>
<tr class="international hidden">
<td><label for="country">Country:</label></td>
<td><input name="country" id="country" size="50" value="" type="text"/></td>
</tr>
<!-- If No to International -->
<tr class="american hidden">
<td><label for="hometown">Hometown:</label></td>
<td><input name="hometown" id="hometown" size="50" value="" type="text"/></td>
</tr>
<tr class="american hidden">
<td><label for="state">State:</label></td>
<td><input name="state" id="state" size="50" value="" type="text"/></td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
/*
isInternational = flag (yes | no) set with the radio buttons
----------------------
internationalFormInput and americanFormInput are the table
rows that will be toggled based on the value of the flag */
var isInternational,
internationalFormInput = $('.international'),
americanFormInput = $('.american');
//function that turns the 1st param on and the second off
function toggleElements(elementOn, elementOff){
elementOn.removeClass('hidden');
elementOff.addClass('hidden');
}
//when the radio button changes
$('input[name="international_or_not"]').on('change', function(){
//get the value of the radio button
isInternational = $(this).val();
//toggle rows based on the isInternational flag
if(isInternational.toLowerCase() === 'yes'){
toggleElements(internationalFormInput, americanFormInput);
}else{
toggleElements(americanFormInput, internationalFormInput);
}
});
</script>
</body>
</html>
William J. Terrell
17,403 PointsThanks! That seems to work, but doesn't appear as "clean" as I would like when actually viewed. The code I used worked on a different form, but that was hiding entire tables...
Maybe you just can't hide rows within a table?
Thanks!
LaVaughn Haynes
12,397 PointsYou can hide rows within a table. Run the code below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Toggle</title>
<style>
table{ width: 50%; }
td{ padding: 20px;}
.row{ color: white; }
.red{ background: red; }
.blue{ background: blue; }
.green{ background: green; }
.black{ background: black; }
.purple{ background-color: purple; }
.hidden{ display: none; }
button{ margin: 30px; }
</style>
</head>
<body>
<!-- START OUTER TABLE -->
<table id="outertable">
<tr>
<td>
<!-- START INNER TABLE -->
<table id="innertable">
<tr class="row red item1">
<td>ROW 1</td>
</tr>
<tr class="row blue item2">
<td>ROW 2</td>
</tr>
<tr class="row green item3">
<td>ROW 3</td>
</tr>
<tr class="row black item4">
<td>ROW 4</td>
</tr>
<tr class="row purple item5 hidden">
<td>ROW 5</td>
</tr>
</table>
<button>click me</button>
<div class="feedback"></div>
<!-- END INNER TABLE -->
</td>
</tr>
</table>
<!-- END OUTER TABLE -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
var count = 1;
$('button').on('click', function(){
$('.row').removeClass('hidden');
$('.item'+count).addClass('hidden');
$('.feedback').html('Row ' + count + ' is hidden.');
count++;
if(count === 6){ count = 1; }
});
</script>
</body>
</html>
Can you post more code or a link to your form? I might be able to see what the issue is.
William J. Terrell
17,403 PointsI've actually just altered it so that it says "State: (please enter country if you are an international student)".
The code that I have should work, if it's possible to hide and show table rows. The exact same code works on the other form, after all (for ordering stationery):
function hideAll() {
$("#business_cards").hide();
$("#envelopes").hide();
$("#letterhead").hide();
}
// hide on initial load
hideAll();
$('[name="stationery_needed"]').change( function () {
hideAll();
switch($('[name="stationery_needed"]:checked').val()) {
case "Business Cards":
$("#business_cards").show();
break;
case "Envelopes":
$("#envelopes").show();
break;
case "Letterhead":
$("#letterhead").show();
break;
default:
console.log("default -- no action");
}
});
So I really don't get why it doesn't work, or why it throws everything onto one row when I try to wrap the two sets of rows each in their own div...
LaVaughn Haynes
12,397 PointsTo my knowledge you can't wrap a table row inside of a div
William J. Terrell
17,403 PointsWilliam J. Terrell
17,403 PointsThe perpetual dilemma: