|
Posted by JMcC on 11/17/12 11:54
hello,
Im trying to do a wee trick with drop down lists. Im creating a form
with 4 drop down lists on it that a user has to fill in. I dont want
to overwhelm the user so what I want is when the page loads up only 1
drop down list is present and then when a selection is made in that
list the next drop down list appears. To do this I was looking into
using a JavaScript function but I keep running into an error and im not
to sure how to fix it. Could someone please take a look at this code
and see if they can help.. Thanks and regards
<html>
<head>
<title>test</title>
<style>
.vis1 { visibility:visible }
.vis2 { visibility:hidden }
</style>
<script type = "text/javascript">
<!-- Hide JavaScript from older browsers
function make_visible(id_no)
{
drop = document.getElementById(id_no);
drop.class="vis1";
}
// End hiding JavaScript from older browsers -->
</script>
</head>
<body>
<form name="list1" action="test.php" method="post">
<select name="test1" id="test1" class="vis1"
OnChange="make_visible('test2');">
<option value="nill">please choose</option>
<option value="1">number 1</option>
<option value="2">number 2</option>
<option value="3">number 3</option>
</select>
<select name="test2" id="test2" class="vis2"
OnChange="make_visible('test3');">
<option value="nill">please choose</option>
<option value="1">number 1</option>
<option value="2">number 2</option>
<option value="3">number 3</option>
</select>
<select name="test3" id="test3" class="vis2"
OnChange="make_visible('test4');">
<option value="nill">please choose</option>
<option value="1">number 1</option>
<option value="2">number 2</option>
<option value="3">number 3</option>
</select>
<select name="test4" id="test4" class="vis2">
<option value="nill">please choose</option>
<option value="1">number 1</option>
<option value="2">number 2</option>
<option value="3">number 3</option>
</select>
<br /><br />
<input type="submit" name="submit" value="submit" />
</form>
</body>
</html>
Navigation:
[Reply to this message]
|