• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 234
  • Last Modified:

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

0
GessWurker
Asked:
GessWurker
  • 5
  • 3
  • 3
  • +1
3 Solutions
 
Göran AnderssonCommented:
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
 
nizsmoDeveloperCommented:
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
 
GessWurkerAuthor Commented:
No luck on either of the suggestions. Neither worked.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
gops1Commented:
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
 
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

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 5
  • 3
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now