Question

I have some forms, which are in some DIVs. DIVs are hidden, and are shown when you select an option from select box. I need a way to position the hidden DIVs, because the default position is under the forementioned select box.

Answer 1

<table> 
<tr>
<td>
<select id = "opts" onchange = "showForm()">
<option value = "0">Select Option</option>
<option value = "1">Option 1</option>
<option value = "2">Option 2</option>
</select>
</td>
<td>
<div id = "f1" style="display:none">
<form name= "form1">
Content of Form 1
</form>
</div>

<div id = "f2" style="display:none">
<form name= "form2">
Content of Form 2
</form>
</div>
</td>
</tr>
</table>

and

<script type = "text/javascript">
function showForm(){
var selopt = document.getElementById("opts").value;
if (selopt == 1) {
document.getElementById("f1").style.display="block";
document.getElementById("f2").style.display="none";
}
if (selopt == 2) {
document.getElementById("f2").style.display="block";
document.getElementById("f1").style.display="none";
}
}

</script>