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

Discussion in 'JavaScript' started by msg2ajay, Aug 22, 2007.

0
  1. #1
    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>
    Code (markup):
    </pre>
    thx,
    HANM.
     
    msg2ajay, Aug 22, 2007 IP
  2. Logic Ali

    Logic Ali Well-Known Member

    Messages:
    170
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    108
    #2
    You need to use display not visibility.
     
    Logic Ali, Aug 23, 2007 IP