PDA

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



msg2ajay
08-23-2007, 03:55 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="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&#37;" 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>


thx,
HANM.

codeexploiter
08-23-2007, 05:53 AM
Instead of using the 'visibility' property you can use 'display' property which will give you the result as you need.

Below the code I've furnished is your code but with the changes I've mentioned. Please check the code and post if you have any other queries.



<html>
<head>

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

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

document.getElementById("two").style.display="none";
document.getElementById("three").style.display="none";
document.getElementById("four").style.display="block";
document.getElementById("five").style.display="none";

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

document.getElementById("two").style.display="block";

document.getElementById("one").style.display="none";
document.getElementById("three").style.display="none";
document.getElementById("four").style.display="block";
document.getElementById("five").style.display="none";

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

document.getElementById("one").style.display="none";
document.getElementById("two").style.display="none";
document.getElementById("four").style.display="none";
document.getElementById("five").style.display="none";

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

document.getElementById("one").style.display="block";
document.getElementById("two").style.display="none";
document.getElementById("three").style.display="none";
document.getElementById("five").style.display="none";

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

document.getElementById("one").style.display="block";
document.getElementById("two").style.display="block";
document.getElementById("three").style.display="none";
document.getElementById("four").style.display="none";

}

}

</script>

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

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

<tr id="one" style="display:none">
<td>NAME: <input type="text"></td>

</tr>
<tr id="two" style="display:none">
<td>NO :<input type="text"></td>

</tr>
<tr id="three" style="display:none">
<td>DESIG: <input type="text"></td>

</tr>
<tr id="four" style="display:none" >
<td>ADDR <input type="text"></td>

</tr>
<tr id="five" style="display:none">
<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>