Advertisements
Automate Your Classic ASP Web Forms
If you've ever created data-driven forms, especially complex ones, you know how hard it is to make all the control names and database column names match up correctly�and you'll immediately appreciate how the techniques shown in this article can simplify development, reduce errors, and minimize maintenance.
Introduction:
HTML form handling consists of a set of named form controls on an HTML page and a Submit button for sending the information contained by the controls to a server, which presents a confirmation/summary page to the user, validates the information and then updates a database. Most important forms insert one more step�displaying the entered data in a preview page so that users can examine the information and correct any errors or incomplete data. When the user approves the information, the preview page's Submit button sends the data to the server, where server-side code writes the information to a database.
If you've developed data-driven Web applications, this scenario should be very familiar. Unfortunately, as forms become more complex, all this passing data back and forth makes developing such pages labor-intensive. It becomes increasingly difficult to ensure that developers perform the data-passing operations correctly, matching the form field control names to the label names for the data on the preview page, and eventually, to the correct columns in the database.
What You Need Classic ASP, standard HTML form controls, an ASP-enabled Web server for building and troubleshooting your ASP code, and a SQL-aware database.
Consider the code fragments shown below, which contain:- Typical code for a generic HTML form
- The server side code to format values submitted by the form into hidden fields on the preview page.
- The server-side code to build a SQL INSERT statement to insert the data into a database.
The first task involves building a standard HTML form. Developers must select control names and associate those names with individual data fields. Generic HTML Form:
<html>
<form method="post" action="preview_form.asp">
<input name="Control_Name" size="30" >
<input type="submit" value="Submit"
name="B1">
<input type="reset" value="Reset"
name="B2">
</form>
</html>
In the second task, developers gather submitted values from the form and insert them into fields for a preview page, touching each data value twice more. ASP Preview (Server-side Code)
<!-- Insert the form value(s) into a hidden field
for submission to the database -->
My Control Value: <input type="hidden"
name="Control_Name"> value="<% =
Request.Form("Control_Name")%>">
Finally, after the user approves the data on the preview page, developers must gather the hidden field values and construct an INSERT statement�touching the data values yet again. ASP Submit Page:
<%
' DataConnection code goes here
' Construct an INSERT statement from
' the submitted hidden field value(s)
SQL = "Insert into Table (FieldNames) " & _
"Values ("Control_Name")"
DataConnection.Execute (SQL)
%>
The process is extremely error-prone. As you can see from the code fragments, there are four separate places where a developer must identify a data value with the name "Control_Name." Misspelling the form control name can result in a variety of problems. If you misspell the control name in the <value="<% = Request.Form("Control_Name")%>"> section of the preview page, no value will display. Finding such an error is obvious for this simplistic form, but becomes considerably less obvious when you're assembling a preview page for a complex form. Unavoidably, the more complex the form, the easier it gets to miss the fact that one or more of the fields has a mismatched name.
Worse things can happen: if you accidentally use a control name that corresponds to an existing, but different control�a value will appear, but not the one you want. Or if you misspell the name in the hidden field and not in the value field, you'll see the right value in preview mode, but that value won't get sent to the database�and the UPDATE or INSERT won't necessarily report an error. For example, if your database field is Foo_1 and you assign Fooo_1 to the <input type="hidden" name="Fooo_1" value="<% = Request.Form("Foo_1")%>">, what happens to your data on submittal? If the submit string expects Foo_1 somewhere in the Request.Form stream, that value will not show up. The data contained by Fooo_1 disappears into cyberspace, never to be seen again.
When you're building forms with a lot of controls, you're in real danger of data loss if you don't handle the field names consistently. Wouldn't it be better for ASP to do all that for you?
In the course of finding a method to do this : <%
For x = 1 To Request.Form.count()
Response.Write(Request.Form.key(x) & _
"(" & x & ")" & " = ")
Response.Write(Request.Form.item(x) & _
"<br>")
Next
%>
This code displays all the form elements (including the SUBMIT and RESET buttons) passed to it from a POST in the order they appear on the source form. This is the first step toward flawless form handling! You can use this technique to display control values and build a list of hidden control values automatically that will pass to a SUBMIT page where you can then construct the necessary SQL string for writing/reading/inserting the database. The following sections contain examples of each operation. Previewing Form Data In Table Format
The following code shows how to extract a list of form field elements and values and view them in a table for the preview page. This technique is extremely useful for debugging.
<%
I = 0
Response.Write "<table border = ""1"" & _
width = ""500"">" & _
"<tr><td width=""%100"" colspan = ""3"">" & _
"<p align = ""center"">" & _
"<b>Table Title</b></td></tr>"
For x = 1 To Request.Form.count()
item = Request.Form.key(x)
Select Case item
Case "Control_Name1_Do_Not_List"
Case "Control_Name2_Do_Not_List"
Case " Control_Name3_Do_Not_List"
Case "B1" 'Submit Button Name
Case Else
j = i mod 3
If j = 0 Then
response.write "<tr><td>" & Item & "</td>"
Else
response.write "<td>" & Item & "</td>"
End If
i = i + 1
End Select
Next
%>
There are some considerations to keep in mind. The loop in the preceding code finds every named control on the form page; however, not every control contains a data value destined for the database. At minimum, you'll need to skip the Submit Button name/value. I use the Select Case construct for skipping values I don't want displayed because it is easier to read and edit than If...Then logic.
Gathering Hidden Field Values
As you might expect, gathering the data for the submit operation is even more straightforward than constructing a table to preview the form data. When the user submits the main form page, you use a loop similar to the one you've already seen to retrieve the form values and output a list of hidden field tags that you'll use later when the user approves the data and submits the preview form.
Submitting the Data to the Database
When the user accepts the data on the preview page by clicking the Submit button, you need to gather the hidden values and construct an SQL INSERT statement to add the new values to your database.
The generic SQL syntax for inserting values into a table is:
INSERT INTO <table> (<field1>,<field2> )
VALUES (<FieldValue1>, <FieldValue2>)
Debugging Tips
You may get errors at this point. To help you debug, insert a line reading Response.Write mySQL before executing the SQL. That will return the constructed SQL statement to the browser so you can inspect it. Errors at this point are generally caused by:- A mismatch between the data types in the database and the types of the submitted field values.
- Failing to skip a field you don't want to send to the database, resulting in an SQL statement that tries to insert a value into a nonexistent database column.
- Failing to format the field value list with quotes.
- You should inspect the completed INSERT statement to make sure you're capturing the complete value. Some database systems may need special delimiters for some field types. You may need to insert these field values at the end of the string, as I've illustrated with the datestamp section of the code.
To summarize:- Build your form as desired.
- For each control in the field, you must create field name in the backend database that has exactly the same name. Specify data types as appropriate (binary for check boxes and radio buttons, Memo for large text boxes, etc.).
- When building the preview page, use Select Case to skip form elements that you don't want displayed (for example, the Submit button name).
- Using the same method, build a list of hidden fields to pass to the database SUBMIT page. You may need to wrap certain field values in quotes in order to pass the complete value.
- Build the INSERT INTO strings as specified.
- If you add or change a form field control, make sure to change the database field name to match the new/edited control's name.
Conclusion:
That's it! With a little preparation you can create a HTML form with any number of controls and, as long as the control name attribute value matches the corresponding column name in the backend database, you can create preview and submit pages (or other pages in the stream) and carry your data seamlessly to the database.
