...

View Full Version : how to allign the text box's to the top of the form



msg2ajay
08-23-2007, 05:45 AM
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="hidden";
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="hidden";
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="hidden";
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="hidden";
document.getElementById("two").style.visibility="hidden";
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">
NAME1: <input type="text"></td>
</tr>
<tr id="two" style="visibility:hidden">
<td>NO :<input type="text">
NO1 :<input type="text"></td>
</tr>
<tr id="three" style="visibility:hidden">
<td>DESIG: <input type="text">
DESIG1: <input type="text"></td>
</tr>
<tr id="four" style="visibility:hidden" >
<td>ADDR <input type="text">
ADDR1 <input type="text"></td>
</tr>
<tr id="five" style="visibility:hidden">
<td>PHONE NAME <input type="text">
PHONE NAME1 <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>
</select>
</form>
</body>
</html>



thx,
HANM.

abduraooft
08-23-2007, 10:02 AM
Instead of table, use separate ,<div></div> to enclose your input fields in each row.

put style like
<div id="tow" style="display:none"></div> to all the divs you want to hide.

And in the JS, use


document.getElementById("one").style.display="block";
and

document.getElementById("two").style.display="none";
Hope this may help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum