Other Javascript to cause form elements to unhide

[zeder]

I copied and pasted code a long time ago from someone providing it for free.
This code is for use with a form.
When you choose an *particular option in a selection box, another additional option appears (is unhid).

Works great. But, I wanted to adapt it because I need TWO hidden selection boxes on my page:

1) When a certain state is selected, THEN the selection box for cities under that state is unhid.

AND

2) when a certian category is chosen THEN a selection box for sub-categories is unhid.


The problem is I ALMOST got it to work, but I don't know javascript well enough to figure out why it is not working perfectly....

Both state and categories DO make their respective hidden elements appear BUT they also make the other un-hidden one hide again, so they are effecting one another...


This is the part of the code pasted into the header

<script type="text/javascript"><!--
if(document.all && !document.getElementById) { //IE4 support
  document.getElementById = function(id) { 
	return document.all[id]; 
	}
  }

/*

This works in Firefox, Netscape 6+, IE4+/Win, Opera 7+, Konqueror 3, Safari, 
IE5/Mac, and iCab 3.

*/
function customOption(selected) { //selected is the selected option
  if(!document.getElementById) return;
  // selected's value property is retrieved and converted to lower case to make 
  // comparing it to another string simpler
  var val = selected.value.toLowerCase();
  // gets the object reference for the element
  var el = document.getElementById('other1label');
  var e2 = document.getElementById('other2label');

  // if val is set to 'customoption' show the textbox
  if(val == 'customoption') {
    el.style.display='block';
	} 
  else { // otherwise hide it or keep it hidden.
    el.style.display='none';
	}
 if(val == 'customoption2') {
    e2.style.display='block';
	} 
  else { // otherwise hide it or keep it hidden.
    e2.style.display='none';
	}
  }
function dss_addLoadEvent(fn) {
  if(typeof(fn)!="function")return;
  var tempFunc=window.onload;
  window.onload=function() {
    if(typeof(tempFunc)=="function")tempFunc();
    fn();
  }
}
dss_addLoadEvent(function() {
  // we find the form element and the select element and attach the event 
  // handlers to them
  var f = document.form1;
  // this next line of code is used to prevent this demo from being submitted
  // remove it or change it as needed
  // f.onsubmit = function(){return false;}
  var sel = f.select1;
  var sel2 = f.select2;
  sel.onchange=function(){customOption(this.options[this.selectedIndex])}
  sel2.onchange=function(){customOption(this.options[this.selectedIndex])}
  // we call the function when the page loads to hide #other1label initially
  sel.onchange();
  sel2.onchange();
});
// -->
</script>

and this is the part of the code used in the form itself

<form action="'.$_SERVER['PHP_SELF'].'"  name="form1" method="post">
<div class="cont">
<div class="label">
<label for="select1">
Assigned State / Location 1:  <select name="select1" id="select1"><option value="1">state 1</option><option value="2">state 2</option>
<option value="customoption">prompt city popup test...</option></select>
</select>
</label>
</div>
<div class="label" id="other1label">
<label for="other1">Assigned City: <select name="cityx"><option value="1">city one</option></select>
</label>
</div>
</div>


<div class="cont">
<div class="label2">
<label for="select2">
Assigned Category:  <select name="select2" id="select2">
<option>Please make a selection</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="black">Black</option>
<option value="customoption2">Other...</option>
</select>
</label>
</div>
<div class="label2" id="other2label">
<label for="other2">Sub-category: <select name="subcatx"><option value="1">This subcat</option><option value="1">That subcat</option><option value="1">Other subcat</option></select>
</label>
</div>
</div>
</form>

THANK YOU!!!

[Spudhead]

Hi. Welcome on board. My name's Spudhead, and I'll be your pilot for this afternoon's flight.

Since you've chosen to fly with "Javascript Frameworks" forum airlines, we'll be taking off from some really old code from about 2004, and should be landing in modern, up-to-date jQuery in about five minutes time. Please remember to keep your hands inside the vehicle at all times.

The in-flight attendants will be running through some pre-flight checks with you now: this will involve tidying up your HTML a little bit, taking out an extra </select> tag that had somehow worked its way in, and indenting it all so we can read it easily:

<form action="'.$_SERVER['PHP_SELF'].'"  name="form1" method="post">
<div class="cont">
	<div class="label">
		<label for="select1">
			Assigned State / Location 1: 
			<select name="select1" id="select1">
				<option value="1">state 1</option>
				<option value="2">state 2</option>
				<option value="customoption">prompt city popup test...</option>
			</select>
		</label>
	</div>
	<div class="label" id="other1label">
		<label for="other1">
			Assigned City:
			<select name="cityx">
				<option value="1">city one</option>
			</select>
		</label>
	</div>
</div>


<div class="cont">
	<div class="label2">
		<label for="select2">
			Assigned Category:
			<select name="select2" id="select2">
				<option>Please make a selection</option>
				<option value="red">Red</option>
				<option value="blue">Blue</option>
				<option value="black">Black</option>
				<option value="customoption2">Other...</option>
			</select>
		</label>
	</div>
	<div class="label2" id="other2label">
		<label for="other2">
			Sub-category:
			<select name="subcatx">
				<option value="1">This subcat</option>
				<option value="1">That subcat</option>
				<option value="1">Other subcat</option>
			</select>
		</label>
	</div>
</div>
</form>

Next, we'll begin fuelling. We need to get rid of the old fuel though first, so we'll delete every single bit of existing script from your <head>.

Once that's done we can put the new fuel in:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){
	
	// hide the secondary select boxes
	$('#other1label, #other2label').hide();

	// when #select1 changes: if the selected value is 'customoption' and #other1label isn't already visible, fade #other1label in.
	$('#select1').change(function(){
		if ( ($(this).val() == 'customoption') && ( !$('#other1label').is(':visible') )){
			$('#other1label').show(500);
		}
	});

	// when #select2 changes: if the selected value is 'customoption' and #other2label isn't already visible, fade #other2label in.
	$('#select2').change(function(){
		if ( ($(this).val() == 'customoption2') && ( !$('#other2label').is(':visible') )){
			$('#other2label').show(500);
		}
	});

});

</script>

Thank you for flying with jQuery. We hope you had a pleasant flight.

[2010newbie]

Hi, I'm new to web development. And, this is my first post ever on a forum. Although, I use them alot to solve problems.

I used your code to develop a form the hides or unhides textboxes based on the user's selection option in the select box. The code works fine but if the user wants to change their option the hide/unhide doesn't change based on their new selection. Is there a flaw in my if statements? How can I fix this? Here is my javascript and html. thanks.

<script type="text/javascript">
function doClick(objSize){

if(objSize.value == "Small"){
document.getElementById("Line1").style.display='list-item';//show line 1
document.getElementById("Line2").style.display='list-item';//show line 2
}
else if(objSize.value=="Medium"){
document.getElementById("Line1").style.display='list-item';//show line 1
document.getElementById("Line2").style.display='list-item';//show line 2
document.getElementById("Line3").style.display='list-item';//show line 3
document.getElementById("Line4").style.display='list-item';//show line 4
}
else if(objSize.value=="Large"){
document.getElementById("Line1").style.display='list-item';//show line 1
document.getElementById("Line2").style.display='list-item';//show line 2
document.getElementById("Line3").style.display='list-item';//show line 3
document.getElementById("Line4").style.display='list-item';//show line 4
document.getElementById("Line5").style.display='list-item';//show line 5
document.getElementById("Line6").style.display='list-item';//show line 6
}

else if(objSize.value=="Choose"){
document.getElementById("Line1").style.display='none';//hide line 1
document.getElementById("Line2").style.display='none';//hide line 2
document.getElementById("Line3").style.display='none';//hide line 3
document.getElementById("Line4").style.display='none';//hide line 4
document.getElementById("Line5").style.display='none';//hide line 5
document.getElementById("Line6").style.display='none';//hide line 6
}

}
</script>


<select name="petTumble_size" id="petTumble_size" onclick="doClick(this)">
<option value="Choose">Choose One</option>
<option value="Small">Small approx. 7X8</option>
<option value="Medium">Medium approx. 9X10</option>
<option value="Large">Large approx. 12X12</option>
</select>
<div id="Line1" style="display:none"><label> Line 1</label><input name="Line1" type="text" value="enter text here" size="25" maxlength="31" /></div>
<span class="floatRight"><a href="expressions.html"> View Common Expressions</a></span><br />
<div id="Line2" style="display:none"><label> Line 2</label><input name="Line2"type="text" value="enter text here" size="25" maxlength="31" /></div><br />
<div id="Line3" style="display:none"><label> Line 3</label><input name="Line3" type="text" value="enter text here" size="25" maxlength="31" /></div><br />
<div id="Line4" style="display:none"><label> Line 4</label><input name="Line4" type="text" value="enter text here" size="25" maxlength="31" /></div><br />
<div id="Line5"style="display:none"><label> Line 5</label><input name="Line5" type="text" value="enter text here" size="25" maxlength="31" /></div><br />
<div id="Line6" style="display:none"><label> Line 6</label><input name="Line6" type="text" value="enter text here" size="25" maxlength="31" /></div>