How do I write and array to show/hide fieldset when project type selected from dropdown

i have project coming up that will have 100 projects.  when the type is selected a <fieldset></fieldset> will display/show, of course if another project type is selected the previous will disppear/hide and the corresponding will show.  Someone has mentioned, instead of using a huge if statement that we could pass the id's of the fieldsets to to an array that will manage the show/hide.  Does anyone have any idea how to do this.

I have included some basic code, the the html of the form.  So onchange of project dropdown the various fieldset should appear while others are hidden.
<!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-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
</head>

<body>

<form method="post" action="">
	<fieldset name="Group1">
	<legend>Select Project Type</legend>
	<select name="Select1">
	<option>Banner</option>
	<option>Web Page</option>
	<option>Email</option>
	<option>Flyer</option>
	</select></fieldset>
	
	<fieldset id="1" name="Group1">
	<legend>Flyer Project 1</legend>
	</fieldset><br />
	<br />
	<fieldset id="2" name="Group1">
	<legend>Flyer Project 2</legend>
	</fieldset><br />
	<br />
	<fieldset id="3" name="Group1">
	<legend>Email Project</legend>
	</fieldset><br />
&nbsp;<br />
	<fieldset id="4" name="Group1">
	<legend>Web Page Project</legend>
	</fieldset><br />
	<br />
</form>

</body>

</html>

Open in new window

LVL 1
justmelatAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ddayx10Commented:
I think maybe when your friend mentioned using arrays he may have been eluding to the arrays that will be generated by the javascript methods:
getElementsByName AND getElementsByTagName

We could write something with a custom array, but that array would simply be keeping a list of IDs and we would have to manually make sure values in the dropdown match IDs on the page, or some other labor intensive work.

So instead I wrote it up using arrays that are a little more automatic in nature, hope that helps:


HTML:
		<fieldset name="Group1">
		<legend>Select Project Type</legend>
		<select onchange="showHide(this);" name="Select1">
		<option value="someID1">Banner</option>
		<option value="someID2">Web Page</option>
		<option value="someID3">Email</option>
		<option value="someID4">Flyer</option>
		</select></fieldset>
		<fieldset id="someID1" name="Group1" style="display:none;">
		<legend>Flyer Project 1</legend>
		</fieldset>
		<fieldset id="someID2" name="Group1" style="display:none;">
		<legend>Flyer Project 2</legend>
		</fieldset>
		<fieldset id="someID3" name="Group1" style="display:none;">
		<legend>Email Project</legend>
		</fieldset>
		<fieldset id="someID4" name="Group1" style="display:none;">
		<legend>Web Page Project</legend>
		</fieldset>

Javascript:
    <script type="text/javascript">
		
		function showHide(sender)
		{
			//get array of all fieldset elements
			var allFieldSets = document.getElementsByTagName('fieldset');
			
			//loop through the elements, hiding all but the one chosen in dropdown
			//exclude 1st fieldset as it contains the dropdown
			for(var i=1;i<allFieldSets.length;i++)
			{
				if(allFieldSets[i].id == sender.value)
				{ allFieldSets[i].style.display = 'block'; }
				else
				{ allFieldSets[i].style.display = 'none'; }
			}
		}
    
    </script>

Open in new window

0
remorinaCommented:
Hi Justmelat,
Try the code below.
I've written a function that will  take the value of the selected option and show the matching ID and change the classname of the current selected fieldset and assign another to all the rest
<!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-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
    <script type="text/javascript">
        function show(el, con, coff) {
            var e =document.getElementById('sets').childNodes
            for(var i=0;i<e.length;i++){
                e[i].className=coff;
            }
            var x=document.getElementById(el)
            x.className=con;
        }
    </script>
    <style type="text/css">
        .hidefield {display:none;}
        .showfield {display:block;}
    </style>
</head>

<body>

<form method="post" action="">
	<fieldset name="Group1">
	<legend>Select Project Type</legend>
	<select name="Select1" onchange="show(this.value, 'showfield', 'hidefield') ">
	<option>-- Please Select --</option>
	<option value="1">Banner</option>
	<option value="2">Web Page</option>
	<option value="3">Email</option>
	<option value="4">Flyer</option>
	</select></fieldset>
	<div id="sets">
	<fieldset id="1" name="Group1" class="hidefield">
	<legend>Flyer Project 1</legend>
	</fieldset><br />
	<br />
	<fieldset id="2" name="Group1" class="hidefield">
	<legend>Flyer Project 2</legend>
	</fieldset><br />
	<br />
	<fieldset id="3" name="Group1" class="hidefield">
	<legend>Email Project</legend>
	</fieldset><br />
&nbsp;<br />
	<fieldset id="4" name="Group1" class="hidefield">
	<legend>Web Page Project</legend>
	</fieldset><br />
	<br />
	</div>
</form>

</body>

</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
justmelatAuthor Commented:
Wow, I have test both of these out.  Now I think I understand what my coworker meant.  At the time I had no idea.
Let me test.  Thank you.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.