style display inline based on menu selection

I want to toggle visibility of a hidden div from display:none to display:inline if the selectedIndex of a select menu is 2. See my page below. If the client select 'No' from the EntireBook1 menu, then I want to reveal the div set as <div id="EntireBook1" style="display:none">. How do I do that? See my test page below.
<html>
<head>
<title>test form</title>
<script>
function showDiv(obj)
{
 
}
</head>
<body>
<table width="933"  align="center" cellpadding="4" cellspacing="3">
  <tr>
    <td valign = "top">&nbsp;</td>
    <td valign = "top">&nbsp;</td>
    <td valign = "top">Entire Book? </td>
    <td valign="top">&nbsp;</td>
  </tr>
  <tr>
    <td valign = "top"><p><font size="2" color="#000000"><b>Analysis of freeway accident detection : </b></font><font size="2" color="#000000">Corby, Marion J. Saccomanno, F. Frank. Univ. of Waterloo. Dept. of Civil Engineering. Washington DC : Transportation Research Board, 1997   (Test Prep)</font></p></td>
    <td valign = "top">&nbsp;</td>
    <td valign = "top"><select name="EntireBook1" id="EB1" style="width:110" onChange="showDiv(this.name)">
        <option></option>
        <option value="Need entire book? Yes" selected="selected">Yes </option>
        <option value="Need entire book? No">No </option>
      </select>
      </font></td>
    <td valign="top">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="4"><div id="EntireBook1" style="display:none"><span class="mailLabel">If you do not need the entire book... below.</span><br/>
        <textarea name="ReqSpecs1" cols="66" rows="2" id="EntireBook1"></textarea>
      </div></td>
  </tr>
</table>
</body>
</html>

Open in new window

GessWurkerAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
gops1Connect With a Mentor Commented:
Change the name of your <select> tag. Two elements cannot have the names and id matching but the can be if it exist in the same element. Try this code:


<html>
	<head>
		<title>test form</title>
		<script>
			function showDiv(obj){
				if(obj.options[obj.selectedIndex].value == "Yes"){
					document.getElementById('EntireBook1').style.display = 'inline';
				}
			}
		</script>
</head>
<body>
	<table width="933"  align="center" cellpadding="4" cellspacing="3">
		<tr>
			<td valign = "top">&nbsp;</td>
			<td valign = "top">&nbsp;</td>
			<td valign = "top">Entire Book? </td>
			<td valign="top">&nbsp;</td>
		</tr>
		<tr>
			<td valign = "top"><p><font size="2" color="#000000"><b>Analysis of freeway accident detection : </b></font><font size="2" color="#000000">Corby, Marion J. Saccomanno, F. Frank. Univ. of Waterloo. Dept. of Civil Engineering. Washington DC : Transportation Research Board, 1997   (Test Prep)</font></p></td>
			<td valign = "top">&nbsp;</td>
			<td valign = "top"><select name="EntireBookSelect" id="EB1" style="width:110" onChange="showDiv(this)">
			<option></option>
			<option value="Yes">Yes </option>
			<option value="No">No </option>
			</select>
			</font></td>
			<td valign="top">&nbsp;</td>
		</tr>
		<tr>
			<td colspan="4"><div id="EntireBook1" style="display:none"><span class="mailLabel">If you do not need the entire book... below.</span><br/>
			<textarea name="ReqSpecs1" cols="66" rows="2" id="EntireBook1"></textarea>
			</div></td>
		</tr>
	</table>
</body>
</html>

Open in new window

0
 
Göran AnderssonConnect With a Mentor Commented:
Change onChange="showDiv(this.name)" to onChange="showDiv(this)". A reference to the element itself is more useful than it's name.

Put this in the function:

document.getElementById('EntireBook1').style.display = obj.selectedIndex == 2 ? 'inline' : 'none';

The default display mode for a div element is 'block', not 'inline'. You should consider using that instead.
0
 
nizsmoConnect With a Mentor DeveloperCommented:
This should work.
<html>
<head>
<title>test form</title>
<script>
function showDiv(obj)
{
	if(obj.options[obj.selectedIndex].value == "Yes")
	{
		document.getElementById('EntireBook1').style.display = 'inline';
	}
}
</script>
</head>
<body>
<table width="933"  align="center" cellpadding="4" cellspacing="3">
  <tr>
    <td valign = "top">&nbsp;</td>
    <td valign = "top">&nbsp;</td>
    <td valign = "top">Entire Book? </td>
    <td valign="top">&nbsp;</td>
  </tr>
  <tr>
    <td valign = "top"><p><font size="2" color="#000000"><b>Analysis of freeway accident detection : </b></font><font size="2" color="#000000">Corby, Marion J. Saccomanno, F. Frank. Univ. of Waterloo. Dept. of Civil Engineering. Washington DC : Transportation Research Board, 1997   (Test Prep)</font></p></td>
    <td valign = "top">&nbsp;</td>
    <td valign = "top"><select name="EntireBook1" id="EB1" style="width:110" onChange="showDiv(this)">
        <option></option>
        <option value="Yes" selected="selected">Yes </option>
        <option value="No">No </option>
      </select>
      </font></td>
    <td valign="top">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="4"><div id="EntireBook1" style="display:none"><span class="mailLabel">If you do not need the entire book... below.</span><br/>
        <textarea name="ReqSpecs1" cols="66" rows="2" id="EntireBook1"></textarea>
      </div></td>
  </tr>
</table>
</body>
</html>

Open in new window

0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
GessWurkerAuthor Commented:
No luck on either of the suggestions. Neither worked.
0
 
GessWurkerAuthor Commented:
Note: The name of the select is the same as the id of the targeted div. I don't want to hardcode the targeted div. The div will always have an id that equals the name of the select menu.
0
 
nizsmoDeveloperCommented:
I tested my solution and works in my browser (selecting yes will display the div)
0
 
Göran AnderssonCommented:
You forgot the </script> tag. When adding it, the code works just fine.

To use the name of the select element to identify the div to show, just do like this:

document.getElementById(obj.name).style.display = obj.selectedIndex == 2 ? 'inline' : 'none';


@nizsmo:

> I tested my solution and works in my browser (selecting yes will display the div)

That's not what he asked for...
0
 
GessWurkerAuthor Commented:
Ok. gops1 is closest so far. My bad, I had given the menu and the div the same id. I fixed that and uploaded the near-solution. But here's what I need: I don't want the textarea id hardcoded into the script. I need a condition that says where selectedindex.value is "no" and the div id matches the select obj name (i.e., div id and select name are the same), toggle the div to visible onchange of the select menu. I will be dealing with a result set that contains an upredictable number of div id/select menu combinations, but the select menu name will ALWAYS match the div id.
<html>
	<head>
		<title>test form</title>
		<script>
			function showDiv(obj){
				if(obj.options[obj.selectedIndex].value == "No"){
					document.getElementById('EntireBook1').style.display = 'inline';
				} else {
				document.getElementById('EntireBook1').style.display = 'none';
				}
			}
		</script>
</head>
<body>
	<table width="933"  align="center" cellpadding="4" cellspacing="3">
		<tr>
			<td valign = "top">&nbsp;</td>
			<td valign = "top">&nbsp;</td>
			<td valign = "top">Entire Book? </td>
			<td valign="top">&nbsp;</td>
		</tr>
		<tr>
			<td valign = "top"><p><font size="2" color="#000000"><b>Analysis of freeway accident detection : </b></font><font size="2" color="#000000">Corby, Marion J. Saccomanno, F. Frank. Univ. of Waterloo. Dept. of Civil Engineering. Washington DC : Transportation Research Board, 1997   (Test Prep)</font></p></td>
			<td valign = "top">&nbsp;</td>
			<td valign = "top"><select name="EntireBookSelect" id="EB1" style="width:110" onChange="showDiv(this)">
			<option></option>
			<option value="Yes">Yes </option>
			<option value="No">No </option>
			</select>
			</font></td>
			<td valign="top">&nbsp;</td>
		</tr>
		<tr>
			<td colspan="4"><div id="EntireBook1" style="display:none"><span class="mailLabel">If you do not need the entire book... below.</span><br/>
			<textarea name="ReqSpecs1" cols="66" rows="2"></textarea>
			</div></td>
		</tr>
	</table>
</body>
</html>

Open in new window

0
 
GessWurkerAuthor Commented:
And the winner is....

Me!

But you all showed me the way, so I'll split points. Thanks everybody!!
<html>
<head>
<title>test form</title>
<script>
function showDiv(obj,targetId){
	if(obj.options.selectedIndex == 2){
		document.getElementById(targetId).style.display = 'inline';
	} else {
	document.getElementById(targetId).style.display = 'none';
	}
}
</script>
</head>
<body>
<table width="933"  align="center" cellpadding="4" cellspacing="3">
  <tr>
    <td valign = "top">&nbsp;</td>
    <td valign = "top">&nbsp;</td>
    <td valign = "top">Entire Book? </td>
    <td valign="top">&nbsp;</td>
  </tr>
  <tr>
    <td valign = "top"><p><font size="2" color="#000000"><b>Analysis of freeway accident detection : </b></font><font size="2" color="#000000">Corby, Marion J. Saccomanno, F. Frank. Univ. of Waterloo. Dept. of Civil Engineering. Washington DC : Transportation Research Board, 1997   (Test Prep)</font></p></td>
    <td valign = "top">&nbsp;</td>
    <td valign = "top"><select name="EntireBookSelect" id="EB1" style="width:110" onChange="showDiv(this,'EntireBook1')">
        <option></option>
        <option value="Yes">Yes </option>
        <option value="No">No </option>
      </select>
      </font></td>
    <td valign="top">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="4"><div id="EntireBook1" style="display:none"><span class="mailLabel">If you do not need the entire book... below.</span><br/>
        <textarea name="ReqSpecs1" cols="66" rows="2"></textarea>
      </div></td>
  </tr>
</table>
</body>
</html>

Open in new window

0
 
Göran AnderssonCommented:
Pass the id of the div in the call to the function:

onChange="showDiv(this, 'EntireBook1')"

Use that in the function:

function showDiv(obj, id) {
   document.getElementById(id).style.display = obj.selectedIndex == 2 ? 'inline' : 'none';
}
0
 
GessWurkerAuthor Commented:
GreenGhost: Right you are! And that's what I did.
0
 
nizsmoDeveloperCommented:
glad you got there in the end :)
0
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.

All Courses

From novice to tech pro — start learning today.