fixing position of forms field after clicking menu

unknown_krasher 0 Newbie Poster
14 Years Ago
hi guys, i would just like to ask for help in my design.i'm having problems with the positions of my fields every time i click on the drop down menu. kindly check out the code below and see what's the problem with my work or any help please..Thanks a lot..
<title>Register</title>
<link rel="stylesheet" href="form-field-tooltip.css" media="screen" type="text/css">
<script type="text/javascript" src="rounded-corners.js"></script>
<script type="text/javascript" src="form-field-tooltip.js"></script>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{
alert(alerttxt);return false;
}
else
{
return true;
}
}
}

function validate_form(thisform)
{
with (thisform)
{
if (validate_required(username,"Username must be filled out!")==false)
{username.focus();return false;}
else if (validate_required(email,"Email must be filled out!")==false)
{email.focus();return false;}
else if(validate_required(fname, "First Name must be filled out!")==false)
{fname.focus();return false;}
else if (validate_required(lname,"Last Name must be filled out!")==false)
{lname.focus();return false;}
else if (validate_required(mname, "Middle Name must be filled out!")==false)
{mname.focus();return false;}


}
}
</script>
<script type="text/javascript">
function display(obj,id1,id2) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
}

</script>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:395px;
height:85px;
z-index:4;
left: 185px;
top: 26px;
}
#Layer2 {
position:absolute;
width:1079px;
height:8px;
z-index:2;
top: 115px;
left: 122px;
}
#Layer3 {
position:absolute;
width:200px;
height:72px;
z-index:2;
left: 691px;
top: 35px;
}
#Layer4 {
position:absolute;
width:889px;
height:852px;
z-index:4;
left: 187px;
top: 218px;
}
#Layer5 {
position:absolute;
width:1039px;
height:7px;
z-index:5;
left: 123px;
top: 128px;
}
#Layer6 {
position:absolute;
width:990px;
height:34px;
z-index:6;
left: 138px;
top: 145px;
}
#Layer7 {
position:absolute;
width:112px;
height:29px;
z-index:7;
left: 235px;
top: 138px;
}
#Layer8 {
position:absolute;
width:577px;
height:78px;
z-index:7;
left: 161px;
top: 211px;
visibility: hidden;
}
#Layer9 {
position:absolute;
width:395px;
height:562px;
z-index:8;
left: 291px;
top: 181px;
}
#Layer10 {
position:absolute;
width:827px;
height:396px;
z-index:8;
left: 181px;
top: 258px;
}
#Layer11 {
position:absolute;
width:949px;
height:17px;
z-index:8;
left: 96px;
top: 183px;
}
#Layer12 {
position:absolute;
width:13px;
height:557px;
z-index:9;
top: 178px;
left: 109px;
}
#Layer13 {
position:absolute;
width:68px;
height:537px;
z-index:10;
top: 66px;
}
#Layer14 {
position:absolute;
width:12px;
height:598px;
z-index:10;
left: 1152px;
top: 179px;
}
#Layer15 {
position:absolute;
width:500px;
height:33px;
z-index:14;
left: 35px;
top: 306px;
}
#Layer16 {
position:absolute;
width:1062px;
height:762px;
z-index:12;
left: 70px;
top: 9px;
}
#Layer17 {
position:absolute;
width:998px;
height:509px;
z-index:5;
top: 187px;
left: 180px;
}
#Layer18 {
position:absolute;
width:597px;
height:94px;
z-index:1;
left: 56px;
top: 12px;
}
#Layer19 {
position:absolute;
width:296px;
height:121px;
z-index:13;
left: 255px;
top: 179px;
}
#Layer20 {
position:absolute;
width:499px;
height:35px;
z-index:15;
left: 34px;
top: 133px;
}
#Layer21 {
position:absolute;
width:200px;
height:115px;
z-index:13;
left: 53px;
top: 178px;
}
#Layer22 {
position:absolute;
width:493px;
height:87px;
z-index:1;
left: 188px;
top: -169px;
}
.style8 {font-size: small}
#Layer23 {
position:absolute;
width:268px;
height:115px;
z-index:13;
left: 256px;
top: 354px;
}
#Layer24 {
position:absolute;
width:200px;
height:307px;
z-index:13;
left: 54px;
top: 354px;
}
#Layer25 {
position:absolute;
width:504px;
height:31px;
z-index:13;
left: 41px;
top: 641px;
}
#Layer26 {
position:absolute;
width:73px;
height:29px;
z-index:13;
left: 451px;
top: 868px;
}
body {
background-image: url(AVRS%20IMAGE/imbg.jpg);
}
#Layer27 {
position:absolute;
width:200px;
height:115px;
z-index:5;
left: 152px;
top: 2px;
}
#Layer28 {
position:absolute;
width:200px;
height:115px;
z-index:13;
left: 211px;
top: 13px;
}
#Layer29 {
position:absolute;
width:449px;
height:115px;
z-index:1;
left: 44px;
top: 9px;
}
#Layer30 {
position:absolute;
width:474px;
height:130px;
z-index:13;
left: 170px;
top: 11px;
}
#Layer31 {
position:absolute;
width:200px;
height:104px;
z-index:14;
left: 693px;
top: 38px;
}
#Layer32 {
position:absolute;
width:964px;
height:31px;
z-index:4;
left: 175px;
top: 907px;
}
#Layer33 {
position:absolute;
width:243px;
height:26px;
z-index:1;
left: 370px;
top: 4px;
}
.style9 {
color: #FFFFFF;
font-size: x-small;
}
#Layer34 {
position:absolute;
width:79px;
height:28px;
z-index:1;
left: 790px;
top: 3px;
}
.style10 {
color: #FFFFFF;
font-weight: bold;
font-size: medium;
}
#Layer35 {
position:absolute;
width:94px;
height:29px;
z-index:2;
left: 868px;
top: 2px;
}
#Layer36 {
position:absolute;
width:894px;
height:699px;
z-index:17;
left: 204px;
top: 201px;
}
#apDiv1 {
position:absolute;
width:972px;
height:726px;
z-index:16;
left: 176px;
top: 185px;
}
.style11 {
font-size: x-large;
font-weight: bold;
}
-->
</style>
</head>

<body>
<div id="Layer31"><img src="AVRS IMAGE/imc.jpg" width="408" height="97" /></div>
<div id="Layer30"><img src="AVRS IMAGE/heading1.jpg" width="470" height="129" /></div>
<div id="Layer6"><img src="AVRS IMAGE/line1.jpg" width="1039" height="34" />
<div id="Layer35">
<div align="center"><a href="registerUser.php" title="REGISTER" class="style10">Sign Up</a></div>
</div>
<div id="Layer34">
<div align="center"><a href="loginUser.php" title="LOGIN" class="style10">Login</a></div>
</div>
</div>
<div id="Layer36">
<table width="889" height="690" border="0" align="center">
<thead>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" onsubmit="return validate_form(this)">
<tr>
<td width="53">&nbsp;</td>
<td colspan="5"><span class="style11">Create Your Account </span></td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="5"><span class="style8">Welcome to IMC and Richie Fernando Hall Reservation System! To create an account, please fill out the following information.</span></td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="6"><blockquote>
<p><img src="AVRS IMAGE/imai.jpg" width="548" height="28" /></p>
</blockquote></td>
</tr>
</tbody>
<tbody>
<tr>
<td>&nbsp;</td>
<td width="20">&nbsp;</td>
<td width="200"><div align="left">Client Type </div></td>
<td width="21"><div align="center">:</div></td>
<td width="359">
<div align="left">
<select name="client_type" id="client_type" value="<?php if(isset($_POST['client_type'])) {echo $_POST['client_type'];}?>" size="1" maxlength="1" onchange="display(this,'A','N');">
<option>Please Select: </option>
<option value="A">Atenean</option>
<option value="N">Non-Atenean</option>
</select>
</div>
<td width="210">&nbsp;</td>
</tr>
</tbody>
<tbody id="A" style="display: none;">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><div align="left">School ID </div></td>
<td><div align="center">:</div></td>
<td>
<div align="left">
<input type="text" name="schoolID" id="schoolID" value="<?php if(isset ($_POST['schoolID'])) {echo $_POST['schoolID'];}?>" size="30" maxlength="9"/>
</div></td>
<td></td>
</tr>
</tbody>

<tbody id="N" style="display: none;">
<tr>

<td>&nbsp;</td>
<td>&nbsp;</td>
<td><div align="left">Contact Information </div></td>
<td><div align="center">:</div></td>
<td>
<div align="left">
<input type="text" name="contactInformation" id="cintactInformation" value="<?php if(isset($_POST['contactInformation'])){echo $_POST['contactInformation'];}?>" size="30" maxlength="20" />
</div></td>
<td></td>
</tr>

<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><div align="left">Address</div></td>
<td><div align="center">:</div></td>
<td>
<div align="left">
<input type="text" name="address" id="address" value="<?php if(isset ($_POST['address'])){echo $_POST['address'];}?>" size="30" maxlength="50" />
</div></td>
<td></td>
</tr>
</tbody>

<tr>
<td colspan="6"><blockquote>
<p><img src="AVRS IMAGE/imli.jpg" width="548" height="28" /></p>
</blockquote></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><div align="left">Username</div></td>
<td><div align="center">:</div></td>
<td>
<div align="left">
<input type="text" name="username" id="username" value="<?php if(isset($_POST['username'])){echo $_POST['username'];}?>" size="30" maxlength="12"
tooltipText="Type in your desired username."/>
</div></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><div align="left">Password</div></td>
<td><div align="center">:</div></td>
<td>
<div align="left">
<input type="password" name="password" size="30" maxlength="15"
tooltiptext="Password must contain characters of numbers and letters!" />
</div></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><div align="left">Password Confirmation </div></td>
<td><div align="center">:</div></td>
<td>
<div align="left">
<input type="password" name="password2" size="30" maxlength="15" />
</div></td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="6"><blockquote>
<p><img src="AVRS IMAGE/impi.jpg" width="548" height="28" /></p>
</blockquote></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><div align="left">First Name </div></td>
<td><div align="center">:</div></td>
<td>

<div align="left">
<input type="text" name="fname" id="fname" />
</div></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><div align="left">Last Name </div></td>
<td><div align="center">:</div></td>
<td>

<div align="left">
<input type="text" name="lname" />
</div></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><div align="left">Middle Name </div></td>
<td><div align="center">:</div></td>
<td>

<div align="left">
<input type="text" name="mname" />
</div></td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="6"><blockquote>
<p><img src="AVRS IMAGE/imsi.jpg" width="548" height="28" /></p>
</blockquote></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><div align="left">Copy the Code below </div></td>
<td><div align="center">:</div></td>
<td>
<label>

<div align="left">
<input type="text" name="code" />
</label>
</div></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><div align="left">Verification Code: </div></td>
<td><div align="center">:</div></td>
<td><div align="left"></div></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><div align="left"></div></td>
<td><div align="center"></div></td>
<td>

<div align="left">
<input type="submit" name="Submit" value="Create an Account" />
</div></td>
<td>&nbsp;</td>
</tr>
</form>
</table>
</div>

</div>
<div id="apDiv1">
<table width="961" height="725" border="1">
<tr>
<td>&nbsp;</td>
</tr>
</table>
</div>
</body>
</html>
web-design
1 Contributor
0 Replies
51 Views
Be the first to reply
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.