It’s been several years since I coded anything, but decided to give this workorder a shot. I found some code on this site, under another javascript post. I got it to work with no problem, but when I tried to adapt it to my requirement, I’m only having very limited success.
I have 3 possible options to hide/show. I can get team to show, but not school or business. Once I select team, it won’t hide, no matter which radio button I select. Any help/suggestions would be greatly appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>test</title>
<style type="text/css" media="screen">
.hide{
display:none;
}
</style>
</head>
<body>
<form action="submit.php" method="post" name="WorkOrder" id="WorkOrder">
<table border="1" cellpadding="4" cellspacing="4">
<tr>
<td>
<p>Customer Type: *<br />
<input type="radio" name="cust" id="cust" value="Team" /> Team<br />
<input type="radio" name="cust" id="cust" value="School" /> School<br />
<input type="radio" name="cust" id="cust" value="Busness" /> Business<br />
<input type="radio" name="cust" id="cust" value="Individual" /> Individual<br />
<input type="radio" name="cust" id="cust" value="Other" /> Other: <input type="text" name="cust" />
</p>
</td>
<td>
<table cellpadding="2" cellspacing="2">
<tr>
<td align="right">Ordered By: </td>
<td align="left"> <input type="text" name="OrderedBy" id="orderedBy" /></td>
</tr>
<tr>
<td align="right">Phone: </td>
<td align="left"> <input type="text" name="Phone" id="Phone" /></td>
</tr>
<tr>
<td align="right">EMail: </td>
<td align="left"> <input type="text" name="EMail" id="EMail" /></td>
</tr>
<tr>
<td align="right">PO #: </td>
<td align="left"> <input type="text" name="PO" id="PO" /></td>
</tr>
</table>
<p></p>
</td>
<td>
<div id="teamType" style="display:none;">
<table border="0" cellpadding="2" cellspacing="2">
<tr>
<td align="right">Team Name: </td>
<td align="left"> <input type="text" name="teamName" /></td>
</tr>
<tr>
<td align="right">Park: </td>
<td align="left"> <input type="text" name="teamPark" /> </td>
</tr>
<tr>
<td align="right">Organization: </td>
<td align="left"> <input type="text" name="teamOrg" /></td>
</tr>
<tr>
<td align="right">Sport: </td>
<td align="left">
<select name="teamSport">
<option value="baseball">Baseball</option>
<option value="softball">Softball</option>
<option value="basketball">Basketball</option>
<option value="football">Football</option>
<option value="soccer">Soccer</option>
</select>
</td>
</tr>
</table>
</div>
<div id="schoolType" style="display:none;">
<table border="0" cellpadding="2" cellspacing="2">
<tr>
<td align="right">School Name: </td>
<td align="left"> <input type="text" name="schoolName" /></td>
</tr>
<tr>
<td align="right">Mascot: </td>
<td align="left"> <input type="text" name="schoolMascot" /> </td>
</tr>
<tr>
<td align="right">Sport: </td>
<td align="left">
<select name="schoolSport">
<option value="baseball">Baseball</option>
<option value="softball">Softball</option>
<option value="basketball">Basketball</option>
<option value="football">Football</option>
<option value="soccer">Soccer</option>
</select>
</td>
</tr>
</table>
</div>
<div id="businessType" style="display:none;">
<table border="0" cellpadding="2" cellspacing="2">
<tr>
<td align="right">Business Name: </td>
<td align="left"> <input type="text" name="businessName" /></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<br />
<input class="search-btn" type="submit" value="Next" />
</form>
<script>
$('input.description').on('change', function() {
$('input.description').not(this).prop('checked', false);
});
</script>
<script>
$('#cust').on('change',function(){
if( $(this).val()==="Team"){
$("#teamType").show()
} else {
$("#teamType").hide()
if( $(this).val()==="School"){
$("#schoolType").show()
} else {
$("#schoolType").hide()
if( $(this).val()==="Business"){
$("#businessType").show()
} else {
$("#teamType").hide()
$("#schoolType").hide()
$("#businessType").hide()
}
}
}
});
</script>
</body>
</html>