etechnicsit
asked on
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('O
}
</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!!!
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('O
}
</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!!!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
-r-
<body onload="selChange(document
-r-
ASKER
Works Perfect + Fast Response!!!!