CSS Codes
CSS Layouts
Results 1 to 2 of 2

Thread: how to allign the text box's to the top of the form

  1. 08-23-2007, 03:55 AM #1
    msg2ajay
    msg2ajay is offline Junior Coders
    Join Date
    Jul 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default how to allign the text box's to the top of the form

    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.

    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.
    Last edited by msg2ajay; 08-23-2007 at 04:21 AM.
    Reply With Quote Reply With Quote
  2. 08-23-2007, 05:53 AM #2
    codeexploiter's Avatar
    codeexploiter
    codeexploiter is offline Elite Coders
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    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.

    Code:
    <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>
    -Codex
    http://jpvalappil.wordpress.com/
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules