Inside Technique : Building Multistep Forms with ASP
By Scott Isaacs

In this technique we show you how to create a complex multi-step form similar to the job sections resume input area. In the resume area, we request a large amount of information. Rather than create a single, long page we broke the form across multiple pages. Also, instead of creating a separate page and URL for each section of the form, we walk through each step by submitting the form back to the same URL. By encapsulating the entire form input process at a single URL, we also have full control over the processing and execution flow for each step. This allows the form to be bookmarked and forces all user's to start at the first step. If separate URL's are used, without redirects it is possible for user's to enter the form mid-stream.

This technique is very simple to implement. It works by passing all the inputted information to the server at each step. Included in this information is a field representing the current step being processed.

The flow works as follows:

1. Include a hidden field representing the current step with the fields requesting user input. Below is a sample form as presented on the client. The HTML used in the form is generated dynamically with ASP on the server.

   <FORM METHOD=post>
     <INPUT TYPE="hidden" NAME="current" VALUE="1">
     <INPUT TYPE="text" NAME="s1_name" VALUE="">
     <INPUT TYPE="submit" "Continue...">
   </FORM>
   

2. When submitted, process the input on the server and proceed to the next step:

   
   <%
   ' Store user-input in hidden fields
   Dim sNextStep
   
   ' Do preprocessing if necessary to determine next step
   select case request.form("current")
     case "1":
       ' process step 1
       ' You can conditionally control the next step
   
       sNextStep = "2"
     case "2":
       sNextStep = "3"
   end select
   
   for each i in Request.Form
     if left(i,1)="s" then
       Response.write("<INPUT TYPE=hidden NAME='" & i & "' VALUE='" & Request.Form(i) & "'>")
     end if
   next
   
   Response.write("<INPUT TYPE=""hidden"" NAME=""current"" VALUE=""" & sNextStep & """>"
   
   ' Output form for next step
   select case sNextStep
     case "2":
       ' step 2
     case "2b":
       ' alternative step 2    
     case "3":
       ' Do final processing if last step
   end select
   %>
   

This is a high-level look at the code used to generate the script. Next we take you through a demonstration script.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.