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!!!
etechnicsitAsked:
Who is Participating?
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.