Hi everyone,

I am developing a wizard like web-based form. The user enters a bit of information, clicks next,
enters a bit more, clicks next, and enters the final bit at which point the data is submitted to
the server.

To do this I have modified a JavaScript from Apple’s site. The whole wizard is in one page in 3
divs and the JavaScript only shows the user one div at a time. Quite nifty really (for an example,
see http://developer.apple.com/internet/...es/wizard.html).

It works fine on a laptop but doesn’t on the Pocket PC 2003 (Windows CE version 4.2, running
Pocket IE 4.01, which according to MS has the same script support as IE 5.5).

Below is the script (Start wizard.htm) followed by utility.js, which it calls, and more links if
you want background info.

Any ideas on how to solve the problem are greatly appreciated.

Howard



Start wizard.htm -------------------------------------

<html><head><title>Wizard</title>
<script type="text/javascript">
<!--

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');
}
}

function switchDiv(this_div, next_div)
{
if (getStyleObject(this_div) && getStyleObject(next_div)) {
changeObjectVisibility(this_div, "hidden");
changeObjectVisibility(next_div, "visible");
}
}

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");
}

// -->
</script>


</head>
<body>
<h1>Welcome to Joe's Vet Clinic</h1>
Before we set up an appointment, we'd like to get some information about you and your pet. Please
fill out the information below:
<p>

<div id="part1" style="position:absolute;top:150px;left:50px;visibility:visible;">
<form name="visitor_info">
<table>
<tr><td>Your name/td><td><input name="visname" type="text"></td></tr>
<tr><td>Your phone number/td>
<td><input name="phone" type="text"></td></tr>
<tr><td>YourZip Code/td><td><input name="zip" type="text"></td></tr>
</table>
<input type="button" value="next"
onClick="switchIfDone(this.form, 'part1', 'part2');">
</form>
</div>

<div id="part2" style="position:absolute;top:150px;left:50px;visibility:hidden;">
<form name="pet_info">
<table>
<tr><td>Your pet's name/td>
<td><input name="petname" type="text"></td></tr>

<tr><td>Dog, cat, fish, bird, lizard or other/td>
<td><input type="text" name="species"></td></tr>

<tr><td>Breed/td>
<td><input name="breed" type="text"></td></tr>
</table>

<input type="button" value="prev"
onClick="switchDiv('part2', 'part1');">

<input type="button" value="next"
onClick="switchIfDone(this.form, 'part2', 'part3');">
</form>
</div>

<div id="part3" style="position:absolute;top:150px;left:50px;visibility:hidden;">
<form name="details">
<table>

<tr><td>When was your pet last to a vet?</td>
<td><input name="last_visit" type="text"></td></tr>

<tr><td>Is there anything wrong with your pet now?</td>
<td><input name="problems" type="text"></td></tr>

<tr><td>Does your pet bite?</td>
<td><input name="bites" type="text"></td></tr>
</table>
<input type="button" value="prev"
onClick="switchDiv('part3', 'part2');">

<input type="button" value="done!"
onClick="switchIfDone(this.form, 'part3', 'finished');">
</form>
</div>

<div id="hiddenstuff" style="position:absolute;top:300;left:5;visibility:hidden;">
<form name="hiddenform" method="POST" action="http://64.175.14.218/cgi-bin/thanks.cgi">
<textarea name = "the_text" cols=40 rows=20>
</textarea>
</form>
</div>

</body>
</html>
End wizard.htm -------------------------------------

Start utility.js -------------------------------------

function getStyleObject(objectId) {
// cross-browser function to get an object's style object given its id
if(document.getElementById && document.getElementById(objectId)) {
// W3C DOM
return document.getElementById(objectId).style;
} else if (document.all && document.all(objectId)) {
// MSIE 4 DOM
return document.all(objectId).style;
} else if (document.layers && document.layers[objectId]) {
// NN 4 DOM.. note: this won't find nested layers
return document.layers[objectId];
} else {
return false;
}
} // getStyleObject

function changeObjectVisibility(objectId, newVisibility) {
// 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;
}
} // changeObjectVisibility

function moveObject(objectId, newXCoordinate, newYCoordinate) {
// get a reference to the cross-browser style object and make sure the object exists
var styleObject = getStyleObject(objectId);
if(styleObject) {
styleObject.left = newXCoordinate;
styleObject.top = newYCoordinate;
return true;
} else {
// we couldn't find the object, so we can't very well move it
return false;
}
} // moveObject

End utilitys.js ----------------------------------------------------------

Background ----------------------------------------------------------
A general overview:
http://developer.apple.com/internet/...amicforms.html
The source for the main script (same as above):
http://developer.apple.com/internet/...rd_source.html
Utility.txt (same as above)
http://developer.apple.com/internet/...es/utility.txt