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

Show html Content based on combo box selections

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
etechnicsit
Asked:
etechnicsit
  • 2
1 Solution
 
RoonaanCommented:
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
 
etechnicsitAuthor Commented:
Roonaan u kick ass!!!

Works Perfect + Fast Response!!!!
0
 
RoonaanCommented:
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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now