?
Solved

Show html Content based on combo box selections

Posted on 2006-07-04
3
Medium Priority
?
235 Views
Last Modified: 2006-11-18
Hi Experts,

I have a webpage which contains a rather large form (HTML).

I have a combo box at the top of the page with the static values & labels a b c d and e

When someone is filling out the form, and they select C in the combo box, I want a table about halfway down the page to appear (which contains more form data, which only applies if C is selected in the combo box) and when they select D a different set of form data appears.

I have used the following script before which works well but it only works for 1 selection & only works if the Option Names dont have any spaces!:

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Author: Third Santor</title>
<script>
  function selChange(obj){
    document.getElementById('OptionC').style.display = obj.selectedIndex==2?'':'none';
  }
</script>
</head>
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<form method=post action="">
<select name="sel1" onchange="selChange(this);">
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="c">c ar</option>
  <option value="d">d e e</option>
  <option value="e">e</option>
</select>
<table id="OptionC" style="display:none">
<tr>
     <td><input type="text" name="txt1"></td>
     <td><input type="text" name="txt2"></td>
     <td><input type="text" name="txt3"></td>
</tr>
</table>
</form>
</body>
</html>

Thanks in advance!!!
0
Comment
Question by:etechnicsit
[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
  • 2
3 Comments
 
LVL 49

Accepted Solution

by:
Roonaan earned 2000 total points
ID: 17040503
You could extend it easily:

  function selChange(obj){
    var selectedValue = obj.options[obj.selectedIndex].value;
    document.getElementById('OptionA').style.display = (selectedValue == 'a' ?'':'none');
    document.getElementById('OptionB').style.display = (selectedValue == 'b' ?'':'none');
    document.getElementById('OptionC').style.display = (selectedValue == 'c' ?'':'none');
  }

In this way you can use the value="" property of the <option> elements to toggle visibility on the different tables.

-r-
0
 

Author Comment

by:etechnicsit
ID: 17040525
Roonaan u kick ass!!!

Works Perfect + Fast Response!!!!
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 17040539
You might need to also add a body onload statement, because some browser "remember" the state of a selectbox. In that case the divs might not be visualized correctly. So you can use:

<body onload="selChange(document.forms[0].sel1);">

-r-
0

Featured Post

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses how to create an extensible mechanism for linked drop downs.
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…
Suggested Courses

762 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