Form Example Source




// Copyright © 2002 by Apple Computer, Inc., All Rights Reserved.
//
// You may incorporate this Apple sample code into your own code
// without restriction. This Apple sample code has been provided "AS IS"
// and the responsibility for its operation is yours. You may redistribute
// this code, but you are not permitted to redistribute it as
// "Apple sample code" after having made changes.

<html><head><title>The Wizard</title>

<script src="utility.txt"></script>
<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>