I am not able to align the textfield to the top of the frame one bye one. The problem

msg2ajay

Aug 22nd 2007, 10:02 pm

hi,
I am not able to align the textfield to the top of the frame one bye one. The problem is it is showing where it is hiding..... so is it possible to allign to the top top of the form one by one. I am sending the sample code.

<html>
<head>

<script type="text/javascript">
function changeme(field){
var val= field.value;
if( val == '1') {

document.getElementById("one").style.visibility="visible";

document.getElementById("two").style.visibility="hidden";
document.getElementById("three").style.visibility="hidden";
document.getElementById("four").style.visibility="visible";
document.getElementById("five").style.visibility="hidden";

}else if( val == '2') {

document.getElementById("two").style.visibility="visible";

document.getElementById("one").style.visibility="hidden";
document.getElementById("three").style.visibility="hidden";
document.getElementById("four").style.visibility="visible";
document.getElementById("five").style.visibility="hidden";

} else if( val == '3') {
document.getElementById("three").style.visibility="visible";

document.getElementById("one").style.visibility="hidden";
document.getElementById("two").style.visibility="hidden";
document.getElementById("four").style.visibility="hidden";
document.getElementById("five").style.visibility="hidden";

}else if( val == '4') {
document.getElementById("four").style.visibility="visible";

document.getElementById("one").style.visibility="visible";
document.getElementById("two").style.visibility="hidden";
document.getElementById("three").style.visibility="hidden";
document.getElementById("five").style.visibility="hidden";

}else if( val == '5') {
document.getElementById("five").style.visibility="visible";

document.getElementById("one").style.visibility="visible";
document.getElementById("two").style.visibility="visible";
document.getElementById("three").style.visibility="hidden";
document.getElementById("four").style.visibility="hidden";

}

}

</script>

</head>
<body>
<form name="myform">

<table width="100%" border="0" cellpadding="2" cellspacing="2">
<tr id ="main" >
<td> MAIN:<input type="text"></td>
</tr>

<tr id="one" style="visibility:hidden">
<td>NAME: <input type="text"></td>

</tr>
<tr id="two" style="visibility:hidden">
<td>NO :<input type="text"></td>

</tr>
<tr id="three" style="visibility:hidden">
<td>DESIG: <input type="text"></td>

</tr>
<tr id="four" style="visibility:hidden" >
<td>ADDR <input type="text"></td>

</tr>
<tr id="five" style="visibility:hidden">
<td>PHONE NAME <input type="text"></td>

</tr>

</table>

<select value="please select" name="selBox" onChange="changeme(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option vlaue="5">5</option>
</select>
</form>
</body>
</html>

</pre>
thx,
HANM.