Creating Dynamic Forms

Monday Jan 11th 1999 by ServerWatch Staff
Share:

The best way to save time and energy in managing a web site is to reuse pages and features.

by Bob Dombroski

The best way to save time and energy in managing a web site is to reuse pages and features. This can be as simple as using include files for sidebars and banner ads. In this article we will discuss the reuse of two pages to submit and process multiple transactions thru database driven html forms.

Lets say you have the job of creating html forms for 1000 different transactions. Each transaction can have a different number of elements within its form. The page which processes the forms basically builds a string by combining each element within the form. The catch behind the problem is any transaction can change at any time and the boss wants an easy way to change each transaction.

Okay how to cover 1000 transactions with 2 pages? DATABASE DRIVEN!  Here's how. This example is of a fictituous insurance companies intranet site. The transactions are all stored in a database. There is also a link to a working example which allows you to enter your own new transactions and see the forms which are generated.

This page is the main page for the insurance company. It contains links to the new transaction page and links to each transaction, done thru DHTML outlines.

The following  javascript is from MSDN. It is used for the DHTML outlines for the Insurance center
<SCRIPT LANGUAGE="JavaScript">
  function clickHandler() {
      var targetId, srcElement, targetElement;
    
      srcElement = window.event.srcElement;
      if (srcElement.className == "Outline") {
           targetId = srcElement.id + "d";
           targetElement = document.all(targetId);
      if (targetElement.style.display == "none") {
          targetElement.style.display = "";
          srcElement.src = "OPEN.gif";
      } else {
          targetElement.style.display = "none";
          srcElement.src = "CLOSED.gif";
      }
}
}

document.onclick = clickHandler;


</SCRIPT>

INSURANCE CENTER:<BR><HR><BR>

'I have begun using file DSN to connect to web databases. It is the way to go if you have to wait
'for an administrator to set up a system DSN
<% Set Count = Server.CreateObject("ADODB.Connection")
DB_PATH = SERVER.MAPPATH("/DB")  'map a path to the Database directory
CONNECT_STR = "FILEDSN="&DB_PATH&"\DB.DSN;" & _
"DBQ=" & DB_PATH & "\WEBDB.MDB;"  


count.Open CONNECT_STR   'open the db connection

'get a recordset of all the transactions
Set RS = Count.Execute("SELECT * FROM TRAN ORDER BY TR_NAME")
%>

<IMG SRC="CLOSED.gif" ID="Out2" CLASS="Outline" STYLE="cursor: hand" WIDTH="16" HEIGHT="16">MAINTENANCE<BR>
<DIV ID="Out2d" STYLE="display:None">
&nbsp;&nbsp;&nbsp;&nbsp;<IMG SRC="CLOSED.gif" WIDTH="20" HEIGHT="15">&nbsp;<a href="NEW_TRAN1.ASP">ADD NEW TRANSACTION</A><BR>
&nbsp;&nbsp;&nbsp;&nbsp;<IMG SRC="CLOSED.gif" WIDTH="20"HEIGHT="15">&nbsp;ADD NEW INSURANCE TYPE<BR>
</DIV>


<DIV ID="Out0">
<IMG SRC="CLOSED.gif" ID="Out<%=DIV_NBR + 1%>" CLASS="Outline" STYLE="cursor: hand" WIDTH="16" HEIGHT="16">&nbsp;TRANSACTIONS<BR>
<DIV ID="Out1d" STYLE="display:None">

<%
'in this loop we are creating a link to each form
DO WHILE NOT RS.EOF
      DIV_NBR = DIV_NBR + 1 %>

&nbsp;&nbsp;&nbsp;&nbsp;---&nbsp;
<a href="TRAN.ASP?TRAN_ID=<%=RS.FIELDS("TR_ID")%>"> <%=RS.FIELDS("TR_NAME")%></a><BR>
<%
RS.MOVENEXT
LOOP %>

</DIV>
</DIV><br>

'This page generates a form page from the database set components.
'Each component has contains a description position and max length

<%
SESSION("TRAN") = REQUEST("TRAN_ID")

THIS_TRAN = SESSION("TRAN")
Set count = Server.CreateObject("ADODB.Connection")
DB_PATH = SERVER.MAPPATH("/TDOM/DB")
CONNECT_STR = "FILEDSN="&DB_PATH&"\DB.DSN;" & _
"DBQ=" & DB_PATH & "\WEBDB.MDB;"
count.Open CONNECT_STR
set countrs = Server.CreateObject("ADODB.RecordSet")
SQL = "SELECT TR_NAME, TR_FILE_TYPE FROM TRAN WHERE " & _                             "TR_ID="&THIS_TRAN

countrs.Open sql, count, 3 , 3, 1
IF COUNTRS.EOF THEN  
'cant find any transactions
     RESPONSE.WRITE ("NO TRANSACTION EXISTS!")
     RESPONSE.END   
'response.end stops the asp here
ELSE
'save off the 2 needed fields from the DB
TRAN_NAME = countrs.Fields("TR_NAME")
TRAN_FT = COUNTRS.FIELDS("TR_FILE_TYPE")
COUNTRS.CLOSE
%>

<head>
<title><%=TRAN_NAME%></title>


<form method="POST" action="TRAN_RS.ASP">
<%
Set count = Server.CreateObject("ADODB.Connection")
DB_PATH = SERVER.MAPPATH("/TDOM/DB")
CONNECT_STR = "FILEDSN="&DB_PATH&"\DB.DSN;" & _
"DBQ=" & DB_PATH & "\WEBDB.MDB;"
count.Open CONNECT_STR

'create a drop down of the possible insurance types
set countrs = Server.CreateObject("ADODB.RecordSet")
SQL = "SELECT * FROM GROUPS"
countrs.Open sql, count, 3 , 3, 1
FIRST_TIME = 1
IF NOT COUNTRS.EOF THEN %>


<center>INSURANCE TYPE <SELECT NAME = "TYPE" SIZE = "1">
<% DO WHILE NOT COUNTRS.EOF %>
<OPTION
<%
IF FIRST_TIME = 1 THEN
       RESPONSE.WRITE " SELECTED "  
'make the first type the default
       FIRST_TIME = 0
END IF %>

VALUE = "<%=COUNTRS.FIELDS("tran_RPT")%>"><%=COUNTRS.FIELDS("tran_group_name")%></OPTION>
<%
COUNTRS.MOVENEXT
LOOP  
'loop thru all the groups
COUNTRS.CLOSE %>
</select>

<%end if %>


</SELECT></CENTER>
<%
SQL = "SELECT * FROM COMPONENTS WHERE TR_TRAN_ID = "& THIS_TRAN & " ORDER BY TR_POSITION"
countrs.Open sql, count, 3 , 3, 1
%>

<table border="0" width="100%" height="100%">
<%                      ' create a table 2 columns wide of all the components
TABLE = 0
DO WHILE NOT COUNTRS.EOF
%>


<% IF TABLE = 0 THEN
TABLE = 1 %>

<TR>
<%
ELSE
TABLE = 0
END IF %>

<TD>
<%
RESPONSE.WRITE COUNTRS.FIELDS("TR_NAME") & ":<br> " %>

<input type="text" name="FIELD<%=COUNTRS.FIELDS("TR_POSITION")%>" size="
<% TEMP = CINT(COUNTRS.FIELDS("TR_LENGTH")) 'create box 5 larger than the max
TEMP = TEMP + 5
RESPONSE.WRITE TEMP %>
" MAXLENGTH =   'create a max length "<%=COUNTRS.FIELDS("TR_LENGTH")%>"></TD>
<%
COUNTRS.MOVENEXT
IF TABLE = 0 THEN %>

</TR>
<%
END IF

LOOP


END IF
%>

</TABLE>
<CENTER><input type="submit" value="Submit" name="B1">
</FORM><BR><HR>

This page is straight forward. It has 3 elements for the transaction name, report code and the number of items for that transaction. This page then posts the result to new_tran2.asp

 

<h1 align="center"><font color="#0000FF">NEW TRANSACTION</font></h1>

<form method="POST" action="NEW_TRAN2.ASP">
<p><font color="#000000">TRANSACTION NAME: </font><input type="text" name="NAME" size="20"></p>
<p>NUMBER COMPONENTS:<input type="text" name="INDEX" size="5"></p>
<p>REPORT CODE: <input type="TEXT" name="RPT" size="20"></p>

<center><p><input type="submit" value="Submit" name="B1"><input
type="reset" value="Reset" name="B2"></p></center>
</form><BR><HR>

This page verifies the transaction doesnt already exist, then inserts it into the tran table. Then we create a form with the number of components the transaction needs and passes it on to the 3rd form.

<%

SESSION("INDEX") = REQUEST.FORM("INDEX")
SESSION("TYPE") = REQUEST.FORM("TYPE")
'we set some session varaibles so we have them available for the next page

MY_type = CInt(SESSION("type"))
session("FT") = request.form("ft")
FT = CInt(SESSION("FT"))
session("sub") = request.form("sub")
MY_SUB = CInt(SESSION("SUB"))
Session("RPT") = Request.Form("RPT")
RPT = SESSION("RPT")
SESSION("NAME") = REQUEST.FORM("NAME")

Set count = Server.CreateObject("ADODB.Connection")
DB_PATH = SERVER.MAPPATH("/TDOM/DB")
CONNECT_STR = "FILEDSN="&DB_PATH&"\DB.DSN;" & _
"DBQ=" & DB_PATH & "\WEBDB.MDB;"
count.Open CONNECT_STR
set countrs = Server.CreateObject("ADODB.RecordSet")
'first see if the tran already exists
SQL = "SELECT * FROM TRAN WHERE TR_NAME = '" & REQUEST.FORM("NAME") & "'"
countrs.Open sql, count, 3 , 3, 1
IF COUNTRS.RECORDCOUNT > 0 THEN
    RESPONSE.WRITE "TRAN ALREADY EXISTS, USE THE EDIT TRANSACTION"
    RESPONSE.END 
'response.end ends the transaction
END IF
'insert the transaction into the tran set
SQL = "INSERT INTO TRAN (TR_NAME, TR_GROUP, TR_SUB_GROUP," & _
" TR_CODE, TR_FILE_TYPE" & _
") VALUES ('" & REQUEST.FORM("NAME") & "', " & MY_TYPE & ", " & my_SUB & _
", '" & RPT & "', " & FT & ")"
countrs.close
countrs.Open sql, count, 3 , 3, 1 
' do a select to find the unique id assigned
SQL = "SELECT * FROM TRAN WHERE TR_CODE = '" & RPT & "'"
countrs.Open sql, count, 3 , 3, 1
SESSION("NEW_TRAN_ID") = COUNTRS.FIELDS("TR_ID")
'set the session var
COUNTRS.CLOSE

%>

<head>
<title>Add of the <%=session("name")%> transaction</title>


<form method="post" action = "new_tran3.asp" >

<%
i = CInt(SESSION("INDEX"))
'here we have to create 3(x) number of input boxes, where x is the number of
'indexes from the last posting form
. Each index will have 3 input boxes, the first for the name of the 'component, the second for the position and the last for the maximum length.
j = 1
do while j < i + 1 %>

<p>COMPONENT <%=j%>:<br>
NAME:<input type="text" name="N<%=j%>" size="20">
&nbsp;&nbsp; POSITION<input type="text"
name="P<%=j%>" size="7">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
LENGTH<input type="text" name="L<%=j%>"size="7"></p>
<%
j = j + 1
loop
%>

<center><p><input type="submit" value="Submit" name="B1"><input
type="reset" value="Reset" name="B2"></p></center><BR><HR>

This page takes each component of the the new_tran2.asp page and inserts it into the components table. The trick is traversing the request collection since the number of request items can be different for any transaction. Also the submit and reset buttons are part of the collection sent to this page, so we must make sure we have logic to handle or else they will be inserted into the database.

<title>NEW TRANSACTION <%=SESSION("NAME")%></title>

</head>

<h1 align="center"><font color="#0000FF">NEW TRANSACTION</font></h1>

<%
Set count = Server.CreateObject("ADODB.Connection")
DB_PATH = SERVER.MAPPATH("/DB")
CONNECT_STR  =  "FILEDSN=" & DB_PATH & "\DB.DSN;" & _
"DBQ=" & DB_PATH & "\WEBDB.MDB;"
count.Open CONNECT_STR
'get a connection to the db
set countrs = Server.CreateObject("ADODB.RecordSet")
NBR_OF_ITEM = 0
'every 3 items makes one component

For Each item In Request.Form() 
'traverse the Request items
      if (item <> "B1") AND (item <> "B2") then 
'dont process the buttons
          NBR_OF_ITEM = NBR_OF_ITEM + 1
          IF MID(ITEM,1,1) = "N" THEN
               MY_NAME = (request.form(item))
          ELSE
          IF MID(ITEM,1,1) = "P" THEN
               MY_POSITION = (request.form(item))
          ELSE
              MY_LENGTH = request.form(item)
          END IF
          IF NBR_OF_ITEM = 3 THEN
              NBR_OF_ITEM = 0 
          END IF
          END IF
'every 3 items do an insert into components
          IF NBR_OF_ITEM = 0 THEN
               SQL = "INSERT INTO COMPONENTS (TR_TRAN_ID, TR_POSITION, " & _                  "TR_LENGTH," & _
               "TR_NAME) VALUES (" & SESSION("NEW_TRAN_ID") & ", " & _
               MY_POSITION & ", " & MY_LENGTH &", '" & MY_NAME & "')"
  
              countrs.Open sql, count, 3 , 3, 1
          END IF
        END IF
Next
%>

<%=SESSION("NAME")%> COMPONENTS HAVE BEEN ADDED!

Working example

Share:
Home
Mobile Site | Full Site
Copyright 2017 © QuinStreet Inc. All Rights Reserved