Solved

style display inline based on menu selection

Posted on 2007-11-17
12
222 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
  • 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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Jquery 2 23
Not allowed to load local recource. 4 34
Javascript - Uncaught SyntaxError: Unexpected token } (Image Swap onclick) 12 51
Html Newline 7 20
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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…

808 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