Advertisement

10.10.2008 at 09:12PM PDT, ID: 23806041 | Points: 500
[x]
Attachment Details

Dynamic Form Field Script Overlapping Other Fields ... Help?

Asked by ShaylaE in Scripting Languages, JavaScript, JavaScript Frameworks

Hi,
I am completely illiterate when it comes to coding.  I needed to build a form that in SOME areas uses dynamic fields to show/hide info depending upon the user's choices.  It works fine, but what is happening, is that it is OVERLAPPING anything subsequent to it, rather than pushing it down.  I have included my form below so you can see what I mean.  In this example, the "Add" button should automatically be pushed down when the dynamic info appears, but that doesn't happen.  Can someone offer a fix for this?  

Thanks so much!

Shayla
Start Free Trial 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:

<script type="text/javascript">
<!--
 
// function switchDiv()
//  this function takes the id of a div
//  and calls the other functions required
//  to show that div
//
function switchDiv(div_id)
{
  var style_sheet = getStyleObject(div_id);
  if (style_sheet)
  {
    hideAll();
    changeObjectVisibility(div_id,"visible");
  }
  else 
  {
    alert("If this form does not display correctly, it's likely your browser does not support Dynamic HTML. For the long form version, please go to ...");
  }
}
 
// function hideAll()
//  hides a bunch of divs
//
function hideAll()
{
   changeObjectVisibility("ez","hidden");
   changeObjectVisibility("full","hidden");
   changeObjectVisibility("superduper","hidden");
}
 
// function getStyleObject(string) -> returns style object
//  given a string containing the id of an object
//  the function returns the stylesheet of that object
//  or false if it can't find a stylesheet.  Handles
//  cross-browser compatibility issues.
//
function getStyleObject(objectId) {
  // checkW3C DOM, then MSIE 4, then NN 4.
  //
  if(document.getElementById && document.getElementById(objectId)) {
	return document.getElementById(objectId).style;
   }
   else if (document.all && document.all(objectId)) {  
	return document.all(objectId).style;
   } 
   else if (document.layers && document.layers[objectId]) { 
	return document.layers[objectId];
   } else {
	return false;
   }
}
 
function changeObjectVisibility(objectId, newVisibility) {
    // first get a reference to the cross-browser style object 
    // and make sure the object exists
    var styleObject = getStyleObject(objectId);
    if(styleObject) {
	styleObject.visibility = newVisibility;
	return true;
    } else {
	// we couldn't find the object, so we can't change its visibility
	return false;
    }
}
// -->
</script>
<body bgcolor="#FFFFFF" text="#000000" <center>
<table border=0>
<tr><td>
 
<font color=navy face=arial size=2><b>New  Entry</b></font>
 
 
<form action=pm.cgi method=post ENCTYPE="multipart/form-data">
 
<input type=hidden name=action value=app_added>
<input type=hidden name=app value="%%app%%">
<input type=hidden name=session value="%%session%%">
<table border=0>
<tr><td><font color=#333333 size=2 face=arial><b><tr>
      <td>
		<font size=2 face=arial color=#333333>
              Date
            </font>
	</td>
	<td>
		<input type=text size=20 name=Newtransport_Date>
 
	</td>
</tr> 
 
<tr>
      <td>
		<font size=2 face=arial color=#333333>
              Leaving From
            </font>
	</td>
	<td>
		<input type=text size=20 name=Newtransport_Leaving_From>
 
	</td>
</tr> 
 
<tr>
      <td>
		<font size=2 face=arial color=#333333>
              Going To
            </font>
	</td>
	<td>
		<input type=text size=20 name=Newtransport_Going_To>
 
	</td>
</tr> 
 
<tr>
      <td>
		<font size=2 face=arial color=#333333>
              Departure Time
            </font>
	</td>
	<td>
		<input type=text size=20 name=Newtransport_Departure_Time>
 
	</td>
</tr> 
 
<tr>
      <td>
		<font size=2 face=arial color=#333333>
              Arrival Time
            </font>
	</td>
	<td>
		<input type=text size=20 name=Newtransport_Arrival_Time>
 
	</td>
</tr> 
</table>
 
<input type="radio" name="form_type" value="ez"
  onClick="switchDiv('ez');">Easy Form
 
<input type="radio" name="form_type" value="full"
  onClick="switchDiv('full');">Normal Form
 
<input type="radio" name="form_type" value="full"
  onClick="switchDiv('superduper');">Super-Complete Form
 
<div id="ez" style="position:absolute;visibility:hidden;Middle:100px;center:5px;border-width:thick thick thick thick; border-color:green; border-style:solid;">
 
<form><table>
<tr><td>Name:</td><td><input type="text"></td><tr>
<tr><td>Address:</td><td><input type="text"></td></tr>
<tr><td>Phone:</td><td><input type="text"></td></tr>
<tr><td>Cell:</td><td><input type="text"></td></tr>
</form></table>
</div>
 
 
<div id="full" style="position:absolute;visibility:hidden;middle:100px;center:5px;border-width:thick thick thick thick; border-color:red; border-style:solid;">
<form name="full_form">
<table>
<tr><td>Name:</td><td><input type="text"></td><tr>
<tr><td>Address:</td><td><input type="text"></td></tr>
<tr><td>Phone:</td><td><input type="text"></td></tr>
<tr><td>Cell:</td><td><input type="text"></td></tr>
<tr><td>Fax:</td><td><input type="text"></td></tr>
</table>
</div>
 
<div id="superduper" style="position:absolute;visibility:hidden;middle:100px;center:5px;border-width:thick thick thick thick; border-color:magenta; border-style:solid;">
 
<table>
<tr><td>Car Make:</td><td><input type="text"></td><tr>
<tr><td>Model:</td><td><input type="text"></td></tr>
<tr><td>Color:</td><td><input type="text"></td></tr>
<tr><td>Year:</td><td><input type="text"></td></tr>
<tr><td>License Plate:</td><td><input type="text"></td></tr>
<tr><td>Cell:</td>
    <td><input type="text"></td></tr>
</table>
</div>
<tr><td><center><input type=submit name=submit value="Add">
</form>
 
</td></tr>
</body>
</html>
[+][-]10.11.2008 at 01:46AM PDT, ID: 22693207

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 30-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]10.11.2008 at 10:13AM PDT, ID: 22694559

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 30-day free trial to view this Expert Comment or ask the Experts your question.

 
 
Loading Advertisement...
20081112-EE-VQP-44 - Hierarchy / EE_QW_2_20070628