PDA

Click to See Complete Forum and Search --> : Visable Setting Of Form Elements

fvillena
12-21-2003, 07:01 AM
Hi Everyone

Season's Greetings, I'm working on a website that has a number of forms, in particuar I have a form and want to display the first drop down menu and then only make subsequent form elements visible once a selection has been made from the first drop down menu.

Does anyone know the best way to do this?

Kind Regards

Francisco Villena
AdamBrill
12-21-2003, 09:18 PM
I think you want something along the lines of this:<html>
<head>
<title>Dynamic form fields</title>
<script type="text/javascript">
function process(element){
switch(element.value){
case "option1":
document.getElementById('extrafields').innerHTML='<input type="text" name="one">';
break;
case "option2":
document.getElementById('extrafields').innerHTML='<input type="text" name="one"><br><input type="text" name="two">';
break;
case "option3":
document.getElementById('extrafields').innerHTML='<input type="text" name="one"><br><input type="text" name="two"><br><input type="text" name="three">';
break;
}
}
</script>
</head>
<body>
<form action="wherever.php" method="post">
<select name="selectbox" onchange="process(this);">
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
</select>
<div id="extrafields"><input type="text" name="one"></div>
</form>
</body>
</html>
ray326
12-21-2003, 09:19 PM
Put the other elements in divs with ids. That will allow you to show and hide them at will using the DOM.
AdamBrill
12-21-2003, 09:24 PM
Originally posted by ray326
Put the other elements in divs with ids. That will allow you to show and hide them at will using the DOM. document.getElementById IS part of the DOM. :rolleyes: My example is fine; there is no reason to have divs all over the page.