如果表单已经填充完成，且next_div参数被设定为finished（完成），则submitTheInfo()函数就会被调用。为了使这段代码正确地工作，含有最后一部分表单的DIV中的next按键应该如下所示：

<input type="button" value="next" 
 onClick="switchIfDone(this.form, part3, finished);">

如果第三个参数不是"finished"，则执行else-if部分的代码。

else if (complete == true) 
  {
    switchDiv(this_div, next_div);
  }

如果表单完成了，则调用switchDiv()函数，向访问者显示表单向导的下一个部分。如果这个else-if失败了，则表单应该肯定没有完成，因此执行最后一个else：

else {
    alert(please complete the form before moving on);
  }

脚本中的最后一个函数真正地把信息提交给CGI脚本。我们也可以在这里对访问者提供的信息进行必要的处理：

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

  document.hiddenform.submit();
}

这个函数遍历页面上所有的表单以及表单上的每一个元素，构造一个包含用户提供的所有信息的字符串。然后把这个字符串关联到一个隐藏表单的textarea构件上。包含隐藏表单的DIV大致如下：

&div id="hiddenstuff" style="position:absolute;top:300;left:5;visibility:hidden;">
<form name="hiddenform" method="POST" action="my_cgi_script">
<textarea name = "the_text" cols=40 rows=20>
</textarea>
</form>
</div>

请注意，这个表单有一个方法和动作，它们告诉浏览器当表单被提交时应该执行哪个脚本。下面这行代码：

  document.hiddenform.the_text.value = submission_string;

把含有表单值的字符串关联到textarea构件中，而下面这行代码：

  document.hiddenform.submit();

则把表单提交给action属性指定的CGI脚本。

正如前面的例子说明的那样，向导程序的核心技术涉及到如何根据访问者的动作来隐藏和显示DIV。这种向导的方法稍微有点复杂，因为在提交给CGI脚本之前，必须从表单中收集信息，但是除此之外，想法是一样的。

信息太多

有些时候，对于一个问题的回答可能分成一整套相关的子问题。如果有人在填写您的公寓租赁表单的时候说他或她没有宠物，则您就不应该问和宠物相关的问题。对于这种情况，您可以提供两个表单，一个给有宠物的租户，另一个给没有宠物的租户。然而，这意味着您需要维护多个彼此相当类似的表单。另外一种解决办法就是用DHTML技术使一部分问题可以根据另外一个问题的答案出现或者消失。请看一下租赁表单，那里含有一个说明这种方法如何工作的实例。

这个脚本通过修改风格表单的显示属性来实现元素的隐藏和显示。如果风格表单的显示属性被设定为none（无），那包含该风格表单的DIV在屏幕上就不占用任何空间（因此是不可见的）。如果显示属性被设定为block（块），则DIV就会出现在页面上。当显示属性从none变成block时，DIV下面的所有元素就会向下移动，以便给DIV的内容腾让空间；而当显示属性从block变为none时，则DIV就消失，其下面的内容就向上移动。请注意，这跟可视属性完全不同。当您使一个隐藏的DIV变为可见时，并不会影响到屏幕上其它内容的位置。如果DIV被定位在页面上其它元素之上，则在显示时，它就会出现在这些元素的上方。

请读一下租赁表单的源代码，看一下发生了什么。当访问者点击其中一个收音机按钮，确认他或她有宠物时，JavaScript就会被触发。按键的代码大致如下：

<input type="radio" name="pet" 
 onClick="hideAll(); changeDiv(cat_questions,block);">cat

如果访问者拥有一只猫，则浏览器就调用hideAll()函数来隐藏那些可能已经显示出来的和宠物有关的问题，然后调用changeDiv()函数，传入cat_questions和block作为参数。在页面稍微向下一点的地方，有一个id为cat_questions的DIV，下面是这个DIV的简化版本：

<div id="cat_questions" style="margin-left:30px;display:none">
Does your cat have fleas?
<input type="radio" name="fleas" value="yes">yes
<input type="radio" name="fleas" value="no">no
</div>

请注意风格表单中的display:none属性。这个属性告诉浏览器不要显示这个DIV的内容。changeDiv()函数和changeObjectVisibility()函数相类似：

function changeDiv(the_div,the_change)
{
  var the_style = getStyleObject(the_div);
  if (the_style != false)
  {
    the_style.display = the_change;
  }
}

首先，程序调用getStyleObject()函数来获得您希望显示的DIV的风格表单对象。如果这个风格表单对象存在，则其显示属性就会被改变。the_change变量的值如果是block，就会使DIV显示在页面上；如果是none，则DIV就被移走。这里用的getStyleObject()函数和我们一直用的函数稍微有点不同。遗憾的是，在Netscape 4上不能用JavaScript来改变显示属性，因此如果网页访问者使用的是Netscape 4，则这个版本的getStyleObject()函数返回false（假）。

hideAll()函数对包含宠物信息的DIV逐个调用changeDiv()函数进行处理。

function hideAll()
{
  changeDiv("cat_questions","none");
  changeDiv("dog_questions","none");
  changeDiv("bird_questions","none");
}

以上又是一种用JavaScript改变含有表单元素的DIV的风格属性的方法。这个例子和先前的例子之间的主要差别在于，这个例子切换的是风格表单的显示属性，而不是可视属性。

好的表单

帮助页面访问者以正确的格式进行填充，可以使信息输入更加容易。表单通常会被一些输入的提示弄乱，比如如何格式化日期，如何输入信用卡号，等等。格式助手页面介绍如何帮助您的用户正确输入，而又不至于因为输入的提示而把页面弄乱。

在上面这个实例中发生的一些事情值得一提。首先，点击文本输入框会弹出一个格式化输入的辅助部件，来说明应该如何填充这个元素。您可能可以猜到，这可以通过把相应的部件放在DIV里面，并改变DIV的可视属性来实现。此外，脚本程序还避免了页面的访问者直接在文本域上进行输入，使他们只有通过相应的部件才能进行输入，这可以确保输入的格式正确无误。最后，脚本从输入部件中取出输入信息，将它放置到文本域中。

让我们首先看一个主文本输入框，即访问者输入姓名的文本框：

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

这个输入域有一个onFocus的事件处理函数。如果有人点击该文本框，就会触发一个焦点事件，运行与这个事件相关联的JavaScript。这时，浏览器就会调用hideAll()函数，把当前可视的部件隐藏起来，然后调用showAndFocus()函数来显示正确的部件：

hideAll()函数对我们来说应该有点面熟：

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

这个函数调用我们在其它例子中用过的changeObjectVisibility()函数，把指定的DIV设置为hidden（隐藏）。

showAndFocus()函数负责显示正确的部件，并把光标从用户点击的表单元素移动到该输入部件上。它接收两个参数：DIV的id和即将成为焦点的表单域。具体到这个例子，脚本传入的DIV id是nameDiv，即包含姓名输入部件的DIV；第二个参数是document.name_form.first_name，它是部件中的即将成为光标焦点的文本域。下面是showAndFocus()函数的源代码：

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

这个函数首先确认是否可以访问DIV的风格信息，使用的函数是我们的老朋友，getStyleObject()。如果风格表单可以被访问，该函数就调用我们的另外一个老朋友，changeObjectVisibility()函数，来把DIV的内容变为可视；然后调用表单元素的focus()方法，以便把光标移动到输入部件上。任何时候，如果有人点击主姓名输入域，则输入部件就会弹出，并且抓住光标焦点。这就是为何我们可以保证主姓名域上的任何信息都是被正确格式化了的原因。从那里获取信息的唯一途径是通过姓名输入部件。

姓名输入部件的代码大致如下：

<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，和我早些时候用的类似。最后一个表单元素是DONE按键，当这个按键被点击时，fillInName()函数就会被调用。fillInName()函数取出部件的输入信息，并将这些信息放到主姓名域中，然后把输入部件隐藏起来：

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

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

日期信息的输入部件的工作机制与此类似，请看一下表单助手的源代码，那里可以看到整个脚本代码。

结束语

在这篇文章中，我演示了如何用DHTML技术使表单更加易于填充的四种方法。让用户选择他们需要的表单可以确保用户看到的表单不会比他们实际需要的表单更加复杂。

有意思的是，虽然这些应用看起来各不相同，但是其实现方法却相当类似。事实上，有几个函数被共用到所有的例子代码中。好的函数就象是积木，您可以把它们用到很多不同的应用程序中。请把这里看到的函数带走，试着用到您自己的应用程序中。您就肯定可以毫不费力地完成一些复杂而强大的功能。