473,385 Members | 1,387 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > javascript > questions > how to align the text box to the top of the form

Join Bytes to post your question to a community of 473,385 software developers and data experts.

how to align the text box 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 the text field to the top of the form one by one. I am sending the sample code.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3.  
  4.     <script type="text/javascript">
  5.         function changeme(field){
  6.             var val= field.value;
  7.             if( val == '1') {
  8.  
  9.                    document.getElementById("one").style.visibility="visible";
  10.  
  11.                    document.getElementById("two").style.visibility="hidden";
  12.                    document.getElementById("three").style.visibility="hidden";
  13.                    document.getElementById("four").style.visibility="hidden";
  14.                    document.getElementById("five").style.visibility="hidden";
  15.  
  16.             }else if( val == '2') {
  17.  
  18.                 document.getElementById("two").style.visibility="visible";
  19.  
  20.                 document.getElementById("one").style.visibility="hidden";
  21.                 document.getElementById("three").style.visibility="hidden";
  22.                 document.getElementById("four").style.visibility="hidden";
  23.                 document.getElementById("five").style.visibility="hidden";
  24.  
  25.             } else if( val == '3') {
  26.                 document.getElementById("three").style.visibility="visible";
  27.  
  28.                 document.getElementById("one").style.visibility="hidden";
  29.                 document.getElementById("two").style.visibility="hidden";
  30.                 document.getElementById("four").style.visibility="hidden";
  31.                 document.getElementById("five").style.visibility="hidden";
  32.  
  33.             }else if( val == '4') {
  34.                 document.getElementById("four").style.visibility="visible";
  35.  
  36.                 document.getElementById("one").style.visibility="hidden";
  37.                 document.getElementById("two").style.visibility="hidden";
  38.                 document.getElementById("three").style.visibility="hidden";
  39.                 document.getElementById("five").style.visibility="hidden";
  40.  
  41.             }else if( val == '5') {
  42.                 document.getElementById("five").style.visibility="visible";
  43.  
  44.                 document.getElementById("one").style.visibility="hidden";
  45.                 document.getElementById("two").style.visibility="hidden";
  46.                 document.getElementById("three").style.visibility="hidden";
  47.                 document.getElementById("four").style.visibility="hidden";
  48.  
Aug 23 '07 #1
3 1848
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.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3.  
  4.     <script type="text/javascript">
  5.         function changeme(field){
  6.             var val= field.value;
  7.             if( val == '1') {
  8.  
  9.                    document.getElementById("one").style.visibility="visible";
  10.  
  11.                    document.getElementById("two").style.visibility="hidden";
  12.                    document.getElementById("three").style.visibility="hidden";
  13.                    document.getElementById("four").style.visibility="hidden";
  14.                    document.getElementById("five").style.visibility="hidden";
  15.  
  16.             }else if( val == '2') {
  17.  
  18.                 document.getElementById("two").style.visibility="visible";
  19.  
  20.                 document.getElementById("one").style.visibility="hidden";
  21.                 document.getElementById("three").style.visibility="hidden";
  22.                 document.getElementById("four").style.visibility="hidden";
  23.                 document.getElementById("five").style.visibility="hidden";
  24.  
  25.             } else if( val == '3') {
  26.                 document.getElementById("three").style.visibility="visible";
  27.  
  28.                 document.getElementById("one").style.visibility="hidden";
  29.                 document.getElementById("two").style.visibility="hidden";
  30.                 document.getElementById("four").style.visibility="hidden";
  31.                 document.getElementById("five").style.visibility="hidden";
  32.  
  33.             }else if( val == '4') {
  34.                 document.getElementById("four").style.visibility="visible";
  35.  
  36.                 document.getElementById("one").style.visibility="hidden";
  37.                 document.getElementById("two").style.visibility="hidden";
  38.                 document.getElementById("three").style.visibility="hidden";
  39.                 document.getElementById("five").style.visibility="hidden";
  40.  
  41.             }else if( val == '5') {
  42.                 document.getElementById("five").style.visibility="visible";
  43.  
  44.                 document.getElementById("one").style.visibility="hidden";
  45.                 document.getElementById("two").style.visibility="hidden";
  46.                 document.getElementById("three").style.visibility="hidden";
  47.                 document.getElementById("four").style.visibility="hidden";
  48.  
  49.             }
  50.  
  51.         }
  52.  
  53.     </script>
  54.  
  55. </head>
  56. <body>
  57. <form name="myform">
  58.  
  59. <table width="100%"  border="0" cellpadding="2" cellspacing="2">
  60.         <tr id ="main" >
  61.             <td> main<input type="text"></td>
  62.         </tr>
  63.  
  64.         <tr id="one" style="visibility:hidden">
  65.             <td>NAME: <input type="text">
  66.             NAME1: <input type="text"></td>
  67.         </tr>
  68.         <tr  id="two" style="visibility:hidden">
  69.             <td>NO :<input type="text">
  70.             NO1 :<input type="text"></td>
  71.         </tr>
  72.         <tr  id="three" style="visibility:hidden">
  73.             <td>DESIG: <input type="text">
  74.             DESIG1: <input type="text"></td>
  75.         </tr>
  76.         <tr id="four" style="visibility:hidden" >
  77.             <td>ADDR <input type="text">
  78.             ADDR1 <input type="text"></td>
  79.         </tr>
  80.         <tr id="five" style="visibility:hidden">
  81.             <td>PHONE NAME <input type="text">
  82.             PHONE NAME1 <input type="text"></td>
  83.         </tr>
  84.  
  85. </table>
  86.  
  87. <select value="please select" name="selBox" onChange="changeme(this)">
  88.    <option value="1">1</option>
  89.    <option value="2">2</option>
  90.    <option value="3">3</option>
  91.    <option value="4">4</option>
  92. </select>
  93. </form>
  94. </body>
  95. </html>
  96.  
  97.  
thx,
HANM.
Aug 23 '07 #2
acoder
16,027 Expert Mod 8TB
Thanks for using code tags. Unfortunately, you forgot to close the tag.

I'm not sure exactly what you mean, but since you mention that it's showing where it's hiding, perhaps you should use
Expand|Select|Wrap|Line Numbers
  1. style.display='block'
and
Expand|Select|Wrap|Line Numbers
  1. style.display='none'
instead of setting the visibility property.
Aug 23 '07 #3
acoder
16,027 Expert Mod 8TB
Aah, right, you started another thread and completed the code. Merged the threads.
Aug 23 '07 #4

Sign in to post your reply or Sign up for a free account.

Similar topics

5
Text align of <input type="submit"> and Mozilla 1.4?
by: Mikko Rantalainen | last post by:
See example at <URL:http://www.cc.jyu.fi/~mira/moz/formtest.php>. The problem is that the label of submit button is always centered on the button regardsless of 'text-align' property in CSS....
HTML / CSS
1
What are the alternatives to TEXT-ALIGN:right?
by: Astra | last post by:
Hi All This has been bugging me for months and I just can't my finger on why it won't work in Safari/FireFox (IE lets me off cos it's nice liek that). In essence, the offending code is as...
HTML / CSS
14
can't get text field to align with textarea field
by: jlemay | last post by:
if you look at http://www.emrose.net/contact1.html the last field is a textarea field and I can't make it align with the other text fields. it's pretty close, but this comes from trial and...
HTML / CSS
6
Left Align Text In Server Button
by: DM | last post by:
Is there any way to left align the text in a server control button?
ASP.NET
2
Align to bottom
by: Thomas Scheiderich | last post by:
Is there a way to make a section of a <td> tag to go to the bottom of the cell? Below is a portion of my page. The <td class="BodyText"> tag has a "vertical-align:top" in the css file to move...
ASP.NET
2
How to align images or text at the bottom or sides.
by: vinit_mahajan99 | last post by:
Hello all, I want to align the images and controls at the bottom of a master page or at the right side. I tried to do it with the table but I was not successful. The image should be seen at...
ASP.NET
5
How to align text label and input field's text ?
by: Yohan Blurp | last post by:
Hi, Here is sample page to show you the problem : <html><body> <form action="/cgi-bin/test.cgi" method="post"> Data Path : <input type="text" size="50" value="C:\Test Data\May 2007.xls"...
HTML / CSS
6
shane3341436
Table row does not align correctly in Mozilla when hidden and displayed
by: shane3341436 | last post by:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta...
Javascript
5
TreeView: How to make a node top align?
by: Max2006 | last post by:
Hi, I have a TreeView and this is my node style: <asp:TreeNodeStyle ForeColor = "#000000" Font-Size="9px" Font-Bold="false" Width="100px" NodeSpacing="3px" /> The problem is the expand...
ASP.NET
3
How to right or centre align the text box
by: happyse27 | last post by:
Hi All, I wanted to align the text box for user registration but the code just wont budge... Kindly advise what is wrong? Cheers... Andrew <HTML>
HTML / CSS
1
Cloud Servers without Credit Card and Email Registration: A Simpler Way to Get on the Cloud
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
General
0
isladogs
Access Europe: Command bars, the Access Shortcut Tool and a simple Audit Log - Wed 3 April
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
General
0
One-click Importing Excel Data into a*Database
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
Microsoft Excel
0
Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
General
0
Basic Javascript concepts
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
Javascript
0
Batch import of multiple excel files into the database
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
Data Management
0
Merging data from multiple Excel files
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
Data Management
0
BarryA
Navigating the Data Structures and Algorithms (DSA)
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
Algorithms / Advanced Math
0
How to build RAID in BIOS?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
Computer Hardware

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!