473,322 Members | 1,494 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

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

how to align and prevent jumping of textfields..

Hi I have this following code

Expand|Select|Wrap|Line Numbers
  1. <script> function displayFields() {             document.getElementById('Label12').style.display = 'none';       document.getElementById('Label13').style.display = 'none';       document.getElementById('Label22').style.display = 'none';       document.getElementById('Label23').style.display = 'none'; }  function dispHideFileds() { alert("");    if (document.forms[0].number.value == 'One') {        document.getElementById('Label13').style.display = '';        document.getElementById('Label12').style.display = 'none';    } else {        document.getElementById('Label12').style.display = '';        document.getElementById('Label13').style.display = '';    } }  function dispHideFields1() {   if (document.forms[0].number1.value == 'One') {       document.getElementById('Label23').style.display = '';   } else {       document.getElementById('Label22').style.display = '';       document.getElementById('Label23').style.display = '';   } } </script></HEAD> <BODY pageLoaded="displayFields()">//pageLoaded must be replaced onLoad<form><table  border="0" cellpadding="0" cellspacing="0">       <tr>         <td>           <table width="100%" border="0" cellpadding="0" cellspacing="0">             <tr>                  <td  width="25%">Select :</td>                               <td align="left" width="25%" id="Label11"><selectname="number" onchange="dispHideFileds()">                                     <option value="">Select</option>                                 <option value="One">One</option>                                 <option value="Two">Two</option>                               </select>                           </td>                   <td align="left" width="25%" id="Label12"><selectname="fruit" >                               <option value="">Please Select One</option>                               <option value="Apple">Apple</option>                               <option value="Orange">Orange</option>                                  </select>                           </td>                           <td align="left" width="25%" id="Label13">This messagehas to be displayed here so that the user can read this and takeappropriate action.</td>               </tr>               <tr>                  <td width="25%">Select Direct Deposit:</td>                               <td align="left" width="25%" id="Label21"><selectname="number1" onchange="dispHideFields1()">                                    <option value="">Select</option>                                 <option value="One">One</option>                                 <option value="Two">Two</option>                               </select>                           </td>                   <td align="left" width="25%" id="Label22"><selectname="fruit1" >                              <option value="">Please Select One</option>                               <option value="Apple">Apple</option>                               <option value="Orange">Orange</option>                                  </select>                           </td>                           <td align="left" width="25%" id="Label23">This messagehas to be displayed here so that the user can read this and takeappropriate action.</td>               </tr>               </table> </td> </tr> </table></form></BODY></html>
  2.  
Now when i run this code based on what value is selected in the first dropdown i show or hide the dropdown next to it.

If the first dropdown value is"one" then i only show a message next to it.
If the first dropdown value is"two"then i show another dropdown next to it and then the message.

Now i have two such rows which has the same behaviour as above .If i select value "One" for the first row .and In the second row i select value"Two" from the dropdown you can see that the fields jump and also the message will not be properly aligned how do i make it align properly.I would really appreciate your help.I have no idea how to make it work without jumping and also the message is properly aligned for bothe rows.
If someone could help me with above code that would be really great.

Thnaks
Prathna
Sep 16 '08 #1
1 1614
RamananKalirajan
608 512MB
Hi just try this one, i had added a div with some blank spaces i had done for one row, just check it out. any doubts post back in the forum

[HTML]<html>
<head>
<script type="text/javascript">
function doThis1()
{
var x=document.getElementById("mySelect");
if(x.options[x.selectedIndex].value=="1")
{
document.getElementById("spc1").style.display='non e';
document.getElementById("selDiv").style.display='b lock';
}
if(x.options[x.selectedIndex].value=="2")
{
document.getElementById("spc2").style.display='non e';
document.getElementById("msgDiv").style.display='b lock';
}
}
</script>
</head>
<body>
<table border="1">
<tr>
<td>
<select id="mySelect" onchange="doThis1();">
<option value="0">select</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</td>
<td>
<div style="height:20px; width=80px " id="spc1">
</div>
<div id="selDiv" style="display:none;">
<select id="myFruit" >
<option value="1">Apple</option>
<option value="2">Orange</option>
</select>
</div>
</td>
<td>
<div style="height:20px; width=200px " id="spc2">
</div>
<div id="msgDiv" style="display:none;">
This is the message to be displayed
</div>
</td>
</tr>
</table>
</body>
</html>[/HTML]

Regards
Ramanan Kalirajan
Sep 17 '08 #2

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

Similar topics

6
by: TJ | last post by:
I've got a calendar that is based on the concept of lots of blocks that are spans with float:left. I would like to be able to have a detail section on the right side of the screen, so that when...
1
by: Ed | last post by:
Hi, I have an html page with a div element within a form for dynamically creating textfields. The problem is when I click a link on the page, or the submit button, then click the back button,...
9
by: Daniel Walzenbach | last post by:
Hi I am faced with the following problem: I have a page (let’s call this page page1.aspx) containing some TextBoxes and a hyperlink which opens another page (let’s call this page page2.aspx)...
1
by: Stefan Mueller | last post by:
In my example the focus should only jump to textbox2 if you press the tab key and if '11' is in textbox1. That works fine. However if you enter e.g. '12' in textbox1 and click on 'Link', Mozilla...
0
by: chandutp | last post by:
hi i am new to this forum can i populate datagrid items of asp page to another asp page having textfields. in this datagrid userId is the index key by which it referenced.and i am using edit...
1
by: eureka | last post by:
Hi folks, I am working on a webapplication using Jsp and JS. On my main Jsp(Jsp1) I have a table which is created dynamically inside a <divand contains all the backend-table's records as rows,...
1
by: =?iso-8859-1?q?Jean-Fran=E7ois_Michaud?= | last post by:
Hello guys, I was wondering if anybody here had implemented a solution where Tables are aligned according to what the hanging indent tells us when there is a potential for the table overflowing...
3
by: bravephantom | last post by:
In my project "scientific calculator", im using 2 textfields in my GUI app. the problem now (or actually what i dislike) is the user has to use the 2 textfields even if he needs a function of only 1...
40
by: maya | last post by:
hi, how do I get text to vertical-align inside a div? http://www.mayacove.com/misc/home.html vertical-align should work, according to this:...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
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...

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.