Solved

style display inline based on menu selection

Posted on 2007-11-17
12
219 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
 

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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
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 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…

708 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now