Change SPAN visibility with SELECT OPTION

Hi guys, I know this will have been covered but search isn’t working for me at the moment. Easy one for people who know JS anyway, I’m sure: I have a SELECT box that precedes a text input, however, when a particular option is selected (the value of which is “BETWEEN”) I need a hidden SPAN to become visible. It is hidden as default with “visibility:hidden;” so I need to just change it to “visibility:visible;” if memory serves. Anyway, likewise, if it is already visible, I need it to be both hidden and have the input in that span have an empty value. Any tips? I need to apply this to many rows in a table, so a function that I can call with the span and input IDs would be best I reckon. Cheers all

Can you post your HTML here so that it is easier and fast to write only javascript rather than preparing the form?

I would but I seem to be having problems where my code is being deleted when I try… something weird going on… bear with me

Right, it’s something like this (have stripped out all of the junk, hopefully left enough in). As you can see, there is my attempt with a little debug alert() in there for my own purposes:

<script type="text/javascript">
	function toggleSpan(value, name)
	{
		var el;
		el	= document.getElementById(name);
		if (value == "BETWEEN"){
			el.style.visibility = \\'visible;\\';
			alert("showing "+name);
		} else {
			el.style.visibility = \\'hidden;\\';
			alert("hiding "+name);
		}
	}
</script>
<form action="page.php" method="POST" name="form1" id="form1">
	<p>
		<select name="name[1]" onChange="toggleSpan(this.value, 'valsc')">
			<option value="AUTO">ANY</option>
			<option value="EQUALS">Equals (=)</option>
			<option value="!EQUALS">Does NOT equal (!=)</option>
			<option value="NULL">Is null</option>
			<option value="!NULL">Is NOT null</option>
			<option value="BETWEEN">Is between</option>
		</select>
		<input type="text" name="val1[sc]" maxlength="2">
			<span id="valsc" style="visibility:hidden"> AND <input type="text" name="val2[sc]" maxlength="2"></span>
	</p>
</form>

Umm… ok here is an example how the CSS attributes of an HTML element are changed from JavaScript.:


<html>
<head>
	<title>colors</title>
	<script type="text/javascript">
	function showHide(selVal, ID){
		if(selVal != ''){ // if selected value in selection box is not blank
			if(document.getElementById('mySpan_' + ID).style.visibility == 'visible'){
				document.getElementById('mySpan_' + ID).style.visibility = 'visible';
				document.getElementById('mySpan_' + ID).innerHTML = selVal;
				// or do as you said since the span is already visible I need it to be both hidden and have the input in that span have an empty value
			}
			else{
				document.getElementById('mySpan_' + ID).style.visibility = 'visible';
				document.getElementById('mySpan_' + ID).innerHTML = selVal;
			}
		}
		else{
			document.getElementById('mySpan_' + ID).style.visibility = 'hidden';
			document.getElementById('mySpan_' + ID).innerHTML = selVal;
		}
	}
	</script>
</head>
<body>
	<table width="500" cellpadding="4" cellspacing="0">
		<tr>
			<td width="50&#37;">
				<select name="mySel" id="mySel" onchange="showHide(this.value, 1);">
					<option value="" selected=""></option>
					<option value="One">One</option>
					<option value="Two">Two</option>
					<option value="Three">Three</option>
				</select>
			</td>
			<td width="50%"><span id="mySpan_1" style="visibility: hidden;">test</span></td>
		</tr>
	</table>
</body>
</html>

Thanks, dinner is ready so I’ll try that when I get back.

Off Topic:

You are from England as it is written in your Location. How come that your dinner is ready almost before lunch??? :stuck_out_tongue:

Breakfast time -> Dinner time -> Tea time -> Supper time :smiley:

By the way, sorted it now, thanks for the help

[ot]I always thought it was:

Breakfast > Brunch > Elevenzies > 2nd Breakfast > Lunch > … … …

:lol:
[/ot]

To quote a famous yellow bear:

Breakfast? That’s one of my seven favourite meals of the day
:smiley: