ashstampede
Programmer
hi, i am trying to implement a multip page form found here [URL unfurl="true"]http://developer.apple.com/internet/webcontent/dynamicforms.html
[/url]
I havn't change the source code from that page at all just trying to edit it into my webpage with positioning and css style. the problem i get is when i click to go to the next page, the page is relaoded again and varibles from the first form appear in the address bar as a Http Get.
This reset the form to "page1" and i can never move foward. this is my code of the form for cross reference to the website. Thank you in advance this is drving me nuts
my javascript
the multi page form, this appears right after the <body> tag.
[/url]
I havn't change the source code from that page at all just trying to edit it into my webpage with positioning and css style. the problem i get is when i click to go to the next page, the page is relaoded again and varibles from the first form appear in the address bar as a Http Get.
This reset the form to "page1" and i can never move foward. this is my code of the form for cross reference to the website. Thank you in advance this is drving me nuts
my javascript
Code:
<script language="JavaScript" type="text/javascript" src="ie5.js"></script>
<script language="JavaScript" type="text/javascript" src="DropDownMenuX.js"></script>
<script language="JavaScript" type="text/javascript" src="calendarDateInput.js"></script>
<script src="utility.txt"></script>
<script language="JavaScript" type="text/javascript">
<!--
window.onload = function() {
//browser sniffer
//if(navigator.userAgent.indexOf('MSIE') != -1 && navigator.userAgent.indexOf('Opera') != -1||navigator.userAgent.indexOf('Opera') != -1)//really opera
//{
//window.location = "reserve2.htm";
//}
//else
if(navigator.userAgent.indexOf('MSIE') != -1){
window.location = "reserve.htm";
}
//else if(navigator.userAgent.indexOf('Gecko') != -1){
//opera can spooft to be mozilla
//window.location = "reserve2.htm";
//}
//else{
// some other browser
// window.location = "reserve2.htm";
//}
var ddmx = new DropDownMenuX('menu2');
ddmx.type = "vertical";
ddmx.delay.show = 0;
ddmx.delay.hide = 400;
ddmx.position.levelX.left = 2;
ddmx.init();
};
function switchIfDone(the_form, this_div, next_div)
{
var complete = true;
for (var loop=0; loop < the_form.elements.length; loop++){
if (the_form.elements[loop].value == ""){
complete = false;
}
}
if ((complete == true) && (next_div == "finished")) {
submitTheInfo();
}
else if (complete == true){
switchDiv(this_div, next_div);
}
else {
alert('please complete the form before moving on');
}
}//end switchIfDone
function switchDiv(this_div, next_div)
{
if (getStyleObject(this_div) && getStyleObject(next_div)){
changeObjectVisibility(this_div, "hidden");
changeObjectVisibility(next_div, "visible");
}
}//switchDiv
function submitTheInfo()
{
var submission_string="";
for (var form_loop=0; form_loop<document.forms.length; form_loop++){
for (var elems=0; elems<document.forms[form_loop].length;elems++){
if (document.forms[form_loop].elements[elems].name != ""){
submission_string += document.forms[form_loop].name + "_" + document.forms[form_loop].elements[elems].name + "=" + document.forms[form_loop].elements[elems].value + "\n";
}
}
}
document.hiddenform.the_text.value = submission_string;
// the next two lines are written for debugging -
// to put the script into action
// comment out the changeObjectVisibility() line
// and uncomment the document.hidden.form.submit() line
//
//document.hiddenform.submit();
changeObjectVisibility("hiddenstuff","visible");
}//end submit
-->
</script>the multi page form, this appears right after the <body> tag.
Code:
<div id="part1" style="position:absolute;top:300px;left:350px;visibility:visible;">
<form name="contact">
<table cellpadding="0" cellspacing="3" style="background:#b3e3ce;">
<tr>
<td colspan="2" id="bold">Contact Information</td>
</tr>
<tr>
<td>First Name:</td>
<td><input type="text" name="fname" /></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" name="lname" /></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" name="email" /></td>
</tr>
<tr>
<td>Phone:</td>
<td><input type="text" name="phone" /></td>
</tr>
<tr>
<td>Fax:</td>
<td><input type="text" name="fax"/></td>
</tr>
<tr>
<td>Address:</td>
<td><textarea name="address" cols="15" rows="2" ></textarea></td>
</tr>
<tr>
<td>Zip/Postal:</td>
<td><input type="text" name="code" /></td>
</tr>
<tr>
<td>City:</td>
<td><input type="text" name="city" /></td>
</tr>
<tr>
<td>State/Prov:</td>
<td><input type="text" name="region" /></td>
</tr>
<tr>
<td>Country:</td>
<td><input type="text" name="country"/></td>
</tr>
<tr>
<td></td>
<td align="right"><input type="image" src="images/buttons/next.jpg" onclick="switchIfDone(this.form, 'part1', 'part2');" /></td>
</tr>
</table>
</form>
</div>
<div id="part2" style="position:absolute;top:300px;left:350px;visibility:hidden;">
<form name="program">
<table cellpadding="0" cellspacing="3" style="background:#b3e3ce;">
<tr>
<td colspan="3" id="bold">Program Selection</td>
</tr>
<tr>
<td colspan="2"><input type="checkbox" name="chkswim" />
Dolphin Swim</td>
<td>Adult:</td>
<td><input type="text" name="swimA" size="5" /></td>
</tr>
<tr>
<td colspan="2"></td>
<td>Ages 13-17:</td>
<td><input type="text" name="swimB" size="5" /></td>
</tr>
<tr>
<td colspan="2"></td>
<td>Ages 6-12:</td>
<td><input type="text" name="swimC" size="5" /></td>
</tr>
<tr>
<td colspan="3">Price Per Person:<span class="red"> $165.00
<a href="">See Restrictions</a></span></td>
</tr>
<tr>
<td colspan="2"><input type="checkbox" name="chkenc" />
Close Encounter</td>
<td>Adult:</td>
<td><input type="text" name="encA" size="5" /></td>
</tr>
<tr>
<td colspan="2"></td>
<td>Ages 13-17:</td>
<td><input type="text" name="encB" size="5"/></td>
</tr>
<tr>
<td colspan="2"></td>
<td>Ages 4-12:</td>
<td><input type="text" name="encC" size="5"></td>
</tr>
<tr>
<td colspan="2"></td>
<td>Ages 0-3:</td>
<td><input type="text" name="encD" size="5" /></td>
</tr>
<tr>
<td colspan="3">Price Per Person:<span class="red"> $85.00 <a href="">See
Restrictions</a></span></td>
</tr>
<tr>
<td colspan="2"><input type="checkbox" name="chkobs" />
Observer</td>
<td>Person(s):</td>
<td><input type="text" name="obs" size="5" /></td>
</tr>
<tr>
<td colspan="3">Price Per Person:<span class="red"> $20.00 <a href="">See
Restrictions</a></span></td>
</tr>
<tr>
<td colspan="2"><input type="image" src="images/buttons/previous.jpg" onclick="switchDiv('part2', 'part1');" /></td>
<td></td>
<td><input type="image" src="images/buttons/next.jpg" onclick="switchIfDone(this.form, 'part2', 'part3');" /></td>
</tr>
</table>
</form>
</div>
<div id="part3" style="position:absolute;top:300px;left:350px;visibility:hidden;">
<form name="dates">
<table cellpadding="0" cellspacing="3" style="background:#b3e3ce;">
<tr>
<td colspan="2" id="bold">Program Date & Times</td>
</tr>
<tr>
<td>First Choice Date of Program:</td>
<td><script language="JavaScript" type="text/javascript">DateInput('fstDate', true, 'DD-MON-YYYY')</script></td>
</tr>
<tr>
<td>Second Choice Date of Program:</td>
<td><script language="JavaScript" type="text/javascript">DateInput('secDate', true, 'DD-MON-YYYY')</script></td>
</tr>
<tr>
<td>Arrival Date in Nassau:</td>
<td><script language="JavaScript" type="text/javascript">DateInput('arrival', true, 'DD-MON-YYYY')</script></td>
</tr>
<tr>
<td>Arrival Time:</td>
<td><input type="text" name="arvTime" /></td>
</tr>
<tr>
<td>Departure Date From Nassau:</td>
<td><script language="JavaScript" type="text/javascript">DateInput('depart', true, 'DD-MON-YYYY')</script></td>
</tr>
<tr>
<td>Departure Time:</td>
<td><input type="text" name="depTime"/></td>
</tr>
<tr>
<td>Hotel/Cruise Ship Name:</td>
<td><input type="text" name="stayName" /></td>
</tr>
<tr>
<td>Room Number:</td>
<td><input type="text" name="rNum" /></td>
</tr>
<tr>
<td>Comments:</td>
<td><textarea name="comment" cols="15" rows="2" ></textarea></td>
</tr>
<tr>
<td><input type="image" src="images/buttons/previous.jpg" onclick="switchDiv('part3', 'part2');" /></td>
<td align="right"><input type="image" src="images/buttons/submit.jpg" onclick="switchIfDone(this.form, 'part3', 'finished');" /></td>
</tr>
</table>
</form>
</div>
<div id="hiddenstuff" style="position:absolute;top:10;left:600;visibility:hidden;z-index:0;">
<form name="hiddenform" method="POST" action="cgiscript.txt">
<textarea name = "the_text" cols=40 rows=20></textarea>
</form>
</div>