Solved

style display inline based on menu selection

Posted on 2007-11-17
12
225 Views
Last Modified: 2012-05-05
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
Comment
Question by:GessWurker
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
  • 3
  • +1
12 Comments
 
LVL 29

Assisted Solution

by:Göran Andersson
Göran Andersson earned 150 total points
ID: 20306276
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
 
LVL 21

Assisted Solution

by:nizsmo
nizsmo earned 150 total points
ID: 20306290
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
 

Author Comment

by:GessWurker
ID: 20306311
No luck on either of the suggestions. Neither worked.
0
What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

 

Author Comment

by:GessWurker
ID: 20306319
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
 
LVL 21

Expert Comment

by:nizsmo
ID: 20306331
I tested my solution and works in my browser (selecting yes will display the div)
0
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20306370
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
 
LVL 17

Accepted Solution

by:
gops1 earned 200 total points
ID: 20306432
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
 

Author Comment

by:GessWurker
ID: 20306457
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
 

Author Comment

by:GessWurker
ID: 20306494
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
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20306499
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
 

Author Comment

by:GessWurker
ID: 20306509
GreenGhost: Right you are! And that's what I did.
0
 
LVL 21

Expert Comment

by:nizsmo
ID: 20306636
glad you got there in the end :)
0

Featured Post

SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question