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 Form Assistant</title>

<script src="utility.txt"></script>
<script type="text/javascript">
<!--

function showAndFocus(div_id, field_to_focus)
{
  var the_div = getStyleObject(div_id);
  if (the_div != false)
  {
    changeObjectVisibility(div_id, "visible");
    field_to_focus.focus();
  }
}


function fillInName(first_name, last_name)
{
  document.main_form.the_name.value = 
		first_name + " " + last_name;

  changeObjectVisibility("nameDiv","hidden");  
}

function fillInDate()
{
  var month_select = document.date_form.the_month;
  var month = month_select.options[month_select.selectedIndex].value;

  var day_select = document.date_form.the_day;
  var day = day_select.options[day_select.selectedIndex].value;

  var year_select = document.date_form.the_year;
  var year = year_select.options[year_select.selectedIndex].value;

  document.main_form.the_date.value = 
		month + " " + day + ", " + year;

  changeObjectVisibility("dateDiv","hidden");
}

function hideAll()
{
  changeObjectVisibility("dateDiv","hidden");
  changeObjectVisibility("nameDiv","hidden");
}

// -->
</script>

</head>
<body>

<form name="main_form">
Name: <input type="text"  name = "the_name" 
  onFocus= "hideAll(); 
      showAndFocus('nameDiv',document.name_form.first_name);"><br>

Date: <input type="text" name = "the_date" 
  onFocus="hideAll(); 
      showAndFocus('dateDiv',document.date_form.the_month);"><br>

</form>

<div id="nameDiv" style="position:absolute;top:50px;left:100px;visibility:hidden;z-index:2;background-color:#CCCCCC">
<form name="name_form">
First name: <input type="text" name="first_name"><br>
Last Name: <input type="text" name="last_name"><br>
<input type="button" value="DONE" 
onClick="fillInName(this.form.first_name.value,this.form.last_name.value);"
>
</form>
</div>

<div id="dateDiv" style="position:absolute;top:50px;left:100px;visibility:hidden;z-index:2;background-color:#CCCCCC;height:50;padding:10px">
<form name="date_form">
<select name="the_month">
<option value="January">January
<option value="February">February
<option value="March">March
</select>
<select name="the_day">
<option value="1">1
<option value="2">2
<option value="3">3
</select>
<select name="the_year">
<option value="1990">1990
<option value="1991">1991
<option value="1992">1992
</select>
<input type="button" value="DONE" 
onClick="fillInDate(this.form);">
</form>
</div>

</body>
</html>