I am using the javascript code below to hide/how section based on project type selected. The value in the array below is the value selected from a dropbox. The id below is the section/fieldset id [i know they are numeric, but that’s the way we got the app, so stuck with it right now]. I want to have multiple values like this:
value: “Ad”, value: “brochure”, value: “Bus wrap”
so basically I want to say: if value equals Ad or Brochure or Bus Wrap, display id 838. I can’t get this to work. How do I incorporate the “or” operator into this code?
//Project Types
var projectTypes = new Array (
{id : '838', value: 'Ad'},
{id : '838', value: 'Cars'},
{id : '839', value: 'Brochure'},
{id : '839', value: 'Planes'},
{id : '840', value: 'Bus Wrap'},
{id : '840', value: 'Boats'}
);
refreshSections(project_type);
function refreshSections(selectedType)
{
for (var i = 0; i < projectTypes.length; i++)
{
if (projectTypes[i].value == selectedType)
{
document.getElementById("section-"+ projectTypes[i].id).style.display = '';
}
else
{
document.getElementById("section-"+ projectTypes[i].id).style.display = 'none';
}
}
}
Here is an html sample of what I want to accomplish:
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Project Overview</title>
<script type="text/javascript">
var projectType_Field_Id = '1169';
//Project Types
var projectTypes = new Array (
{id : '11', value:'Cars'},
{id : '12', value:'Boats'},
{id : '13', value:'Planes'}
);
//occurs onLoad
function formOnLoad()
{
var project_type = document.getElementById(projectType_Field_Id).value;
refreshSections(project_type);
}
/*
* Onchange - Project Type
*/
function projectTypeChange()
{
var project_type = document.getElementById(projectType_Field_Id).value;
refreshSections(project_type);
}
function refreshSections(selectedType)
{
for (var i = 0; i < projectTypes.length; i++)
{
if (projectTypes[i].value == selectedType)
{
document.getElementById("section-"+ projectTypes[i].id).style.display = '';
} else {
document.getElementById("section-"+ projectTypes[i].id).style.display = 'none';
}
}
}
</script>
</head>
<body onload="formOnLoad();">
<form method="post" action="">
<fieldset name="mainSection">
<legend style="color:blue; font-weight:bold">Project Overview Section</legend>
<table style="width: 100%">
<tr>
<td style="height: 33px; width: 178px; color:maroon">Name</td>
<td style="height: 33px"><input id="1125" name="1125" type="text" /></td>
</tr>
<tr>
<td style="height: 33px; width: 178px; color:maroon">Email</td>
<td style="height: 33px"><input id="1026" name="1026" type="text" /></td>
</tr>
<tr>
<td style="width: 178px">Product Title</td>
<td><input id="1089" name="1089" type="text" /></td>
</tr>
<tr>
<td style="width: 178px">Product Type</td>
<td><select id="1169" name="1169" onChange="projectTypeChange();">
<option value="">Select</option>
<option value="Cars">Cars</option>
<option value="Boats">Boats</option>
<option value="Planes">Planes</option>
<option value="Trains">Trains</option>
<option value="Skateboard">Skateboard</option>
<option value="Helicopter">Helicopter</option>
</select></td>
</tr>
</table>
</fieldset><br /><br />
<fieldset id="section-11" name="section-11">
<legend style="color:fuchsia; font-weight:bold">Car Details Section</legend>
<table cellpadding="2" style="width: 100%">
<tr>
<td style="width: 334px; height: 35px"><label style="color:maroon">Size:</label></td>
<td style="height: 35px"><input id="1245" name="1245" type="text" /></td>
</tr>
<tr>
<td style="height: 35px; width: 334px">Color:</td>
<td style="height: 35px">
<select id="1433" name="1433">
<option value="Orange">Orange</option>
<option value="Blank">Blank</option>
<option value="Green">Green</option>
</select></td>
</tr>
<tr>
<td style="width: 334px">Description:</td>
<td>
<textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea></td>
</tr>
</table>
</fieldset>
<br />
<fieldset id="section-12" name="section-12">
<legend style="color:fuchsia; font-weight:bold">Plane Details Section</legend>
<table cellpadding="2" style="width: 100%">
<tr>
<td style="width: 334px; height: 35px"><label style="color:maroon">Size:</label></td>
<td style="height: 35px"><input id="1245" name="1245" type="text" /></td>
</tr>
<tr>
<td style="height: 35px; width: 334px">Color:</td>
<td style="height: 35px">
<select id="1433" name="1433">
<option value="Orange">Orange</option>
<option value="Blank">Blank</option>
<option value="Green">Green</option>
</select></td>
</tr>
<tr>
<td style="width: 334px">Description:</td>
<td>
<textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea></td>
</tr>
</table>
</fieldset><br />
<fieldset id="section-13" name="section-13">
<legend style="color:fuchsia; font-weight:bold">Boat Details Section</legend>
<table cellpadding="2" style="width: 100%">
<tr>
<td style="width: 334px; height: 35px"><label style="color:maroon">Size:</label></td>
<td style="height: 35px"><input id="1245" name="1245" type="text" /></td>
</tr>
<tr>
<td style="height: 35px; width: 334px">Color:</td>
<td style="height: 35px">
<select id="1433" name="1433">
<option value="Orange">Orange</option>
<option value="Blank">Blank</option>
<option value="Green">Green</option>
</select></td>
</tr>
<tr>
<td style="width: 334px">Description:</td>
<td>
<textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea></td>
</tr>
</table>
</fieldset>
<fieldset id="section-1011" name="section-1011">
<legend style="color:green; font-weight:bold">Misc Info Section</legend>
<table cellpadding="2" style="width: 100%">
<tr>
<td style="width: 334px; height: 35px"><label>Size:</label></td>
<td style="height: 35px"><input id="1301" name="1301" type="text" /></td>
</tr>
<tr>
<td style="height: 35px; width: 334px">Color:</td>
<td style="height: 35px">
<select id="1302" name="1302">
<option value="Orange">Orange</option>
<option value="Blank">Blank</option>
<option value="Green">Green</option>
</select></td>
</tr>
<tr>
<td style="width: 334px">Description:</td>
<td>
<textarea id="1303" name="1303" rows="2" style="width: 433px"></textarea></td>
</tr>
</table>
</fieldset>
<input name="Send Job" type="submit" value="Send Job" />
</form>
It looks like in your for loop, you only need to check if your
selectedTypematches one of theprojectTypes. Try this –This will only show your element when it matches a project type, and then break out of the loop right after matching.