need help with javascript toggle menu

XML, Perl, Python, and other languages can be discussed here, even if it isn't PHP (We might forgive you).

Moderator: General Moderators

Post Reply
mikewooten
Forum Contributor
Posts: 169
Joined: Wed Feb 11, 2004 12:13 pm
Location: Duluth, Georgia
Contact:

need help with javascript toggle menu

Post by mikewooten »

i am working on a dropdown menu where if you select an option, a form appears below.
This is what i'm working on....
i have a dropdown menu where the user will be able to select which option they would like to purchase and once they select it another table below appears with the appropriate for m for that section.
i've been working with it and now how can i get it to come up as one field at a time so that only one field is showing. the way it looks now, when you choose one, then choose another, it just adds fields to the page, how can i get it to add one field at a time like if you choose one option, one field shows up, you choose another option, the other field shows up, without the last field adding to it?
if you want to take a look at the page, here's the address:

http://www.mynetmarketingcenter.com/eblasts/

the drop down menu is at the bottom of the page

any help would be appreciated, thanks
here is the code i'm using:

Code: Select all

<html>

<head>
<title>Display &lt;input&gt; OnClick</title>
<script type=&quote;text/javascript&quote;>
function toggle(elementId)
	{
	if(elementId == 0)
		{
		return;
		}

	var obj = document.getElementById(elementId);
	obj.style.display = (obj.style.display == &quote;none&quote;) ? &quote;block&quote; : &quote;none&quote;;
	}
</script>
</head>

<body>
<form action=&quote;_SELF&quote; method=&quote;post&quote; name=&quote;send&quote; enctype=&quote;multipart/form-data&quote;>
	<select name=&quote;menu&quote; onchange=&quote;toggle(this.options&#1111;this.selectedIndex].value)&quote;>
		<option value=&quote;0&quote; selected=&quote;selected&quote;>Select...</option>
		<option value=&quote;1&quote;>Solo 1-Line Ad</option>
		<option value=&quote;2&quote;>Solo Classified Ad</option>
		<option value=&quote;3&quote;>Solo Mini-Mailer</option>
		<option value=&quote;4&quote;>Solo Medium Mail Blaster</option>
		<option value=&quote;5&quote;>Solo Large Mail PRO-Blaster</option>
		<option value=&quote;6&quote;>Solo MASSIVE Mail PROPLUS-Blaster</option>
	</select>
	<!-- A <div> FOR EACH <option> -->
	<div id=&quote;1&quote; style=&quote;display: none;&quote;><input type=&quote;text&quote; name=&quote;text1&quote; value=&quote;Solo 1-Line Ad&quote; /></div>
	<div id=&quote;2&quote; style=&quote;display: none;&quote;><input type=&quote;text&quote; name=&quote;text2&quote; value=&quote;Solo Classified Ad&quote; /></div>
	<div id=&quote;3&quote; style=&quote;display: none;&quote;><input type=&quote;text&quote; name=&quote;text3&quote; value=&quote;Solo Mini-Mailer&quote; /></div>
	<div id=&quote;4&quote; style=&quote;display: none;&quote;><input type=&quote;text&quote; name=&quote;text4&quote; value=&quote;Solo Medium Mail Blaster&quote; /></div>
	<div id=&quote;5&quote; style=&quote;display: none;&quote;><input type=&quote;text&quote; name=&quote;text5&quote; value=&quote;Solo Large Mail PRO-Blaster&quote; /></div>
	<div id=&quote;6&quote; style=&quote;display: none;&quote;><input type=&quote;text&quote; name=&quote;text6&quote; value=&quote;Solo MASSIVE Mail PROPLUS-Blaster&quote; /></div>
</form>
</body>

</html>
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Post by onion2k »

Before you set one of the div's to be visible, set them all to be hidden. Something like:

Code: Select all

function toggle(elementId)
	{
	if(elementId == 0)
		{
		return;
		}
	var x;
	for (x = 1; x < 6; x++) {
		var obj = document.getElementById(x);
		obj.style.display = &quote;none&quote;;
	}
	var obj = document.getElementById(elementId);
	obj.style.display = (obj.style.display == &quote;none&quote;) ? &quote;block&quote; : &quote;none&quote;;
	}
mikewooten
Forum Contributor
Posts: 169
Joined: Wed Feb 11, 2004 12:13 pm
Location: Duluth, Georgia
Contact:

Post by mikewooten »

ok, that works better, but if you select the selected option, how can you make the other field that was selected disappear?
thanks
Post Reply