Ah, forms. We all love them. And everyone knows how to use them (and if you don't, check out the related links at the end of this article). Well, we're here today to show you how to give your forms a little bit more power. By making your forms self-referencing, you can open up whole new areas of functionality with your web applications.
How to Submit a Form
Below is an example of a typical, though simple, HTML form.
NOTE: In the above code you'll notice I supply a name property for every element, including the submit button. I often see HTML writers not supplying names for this, and other, elements. This is very important, and generally a good thing to do anyway.
Generally, the file you specify in the ACTION parameter will be another file that processes your form results. With ASP, however, there is no reason to use another file. You can simply specify the same file - form1.asp - and handle everything in one file.
That's the simple part of it, and before we get to actual implementations, let's take a look at some of the benefits of doing it this way.
Benefits
There are quite a few good reasons to using self-referencing forms, among which are:
Easier error handling
You can do all error processing and notification on the same page. More on this later.
Easier file management (no need for separate, multiple files for a single form)
No need to create and keep track of so many files that all process the same form. This avoids a lot of headaches for the developer.
More user friendly
Users will benefit because of the smoother end experience that you'll get by using a single file to perform all your logic.
Opens up new functionality
By building everything in one page, you can do things that wouldn't normally be possible without extra work. For instance, with a self-referencing form, you can build a wizard-style interface, complete with back and next buttons. "Well," you say, "I could do that the old way." You could, yes, but not without a bunch of redirects, which eat up server time, as well as introduce more complications. More on this later.
Cleaner logic
This is probably the most important element for developers. You can keep all similar code in a single place, and not have to trounce around everywhere looking for a particular implementation.
Unfortunately, there are also a few drawbacks, though these can be circumvented with some planning.
Pre-entered values
With self-referencing forms, if a user enters a form value, and for some reason the submission was not successful, the value the user entered will be erased from the form. With the traditional redirection form submission, the user could just hit back, and the values would still be there.
NOTE: GET puts all of the form's variables in the querystring. If you specified POST as the method for the form, you'll have to use Request.Form in your code instead of Request.Querystring. Note, that you can also simply use Request, but you lose a bit of preciseness that way.
Now you have complete access to the form's variables, and can manipulate them anyway you want. After you have successfully done whatever you wish, you can then use a Response.Redirect to send the user to another page if necessary.
Error Handling
Let's say the user entered in some bad data. For instance, if you want them to enter an email address, but they enter in their first name instead. You could check to see if the variable is correct, and if not, display a message to the user on the same page. This means the user won't have to back up to correct the problem. Here's a very user friendly example.
form1.asp
<%
dim arrError(1)
arrError(0)=False
if Request.Form("submit") = "Submit" then
dim strText, strReqField
CONST NUMREQFIELDS = 1
strText = Request.Querystring("Email")
For i = 0 to NUMREQFIELDS - 1
strReqField = Cstr(GetRequiredFieldName(I))
If Len(Request.Form(strReqField)) = 0 Then
arrError(i) = TRUE
Call AddToErrorString(Errormsg, strReqField)
End If
Next
End if
Sub AddToErrorString(strError, strNewError)
'dim strError
strError = strError & "<BR>" & vbCrLf & _
"You forgot to enter a " & strNewError
End Sub
Function GetRequiredFieldName(intWhich)
Select Case intWhich
Case 0
GetRequiredFieldName = "Email"
End Select
End Function
%>
<HTML>
<HEAD><TITLE>My Form</TITLE></HEAD>
<BODY>
<% = Errormsg %>
<FORM METHOD="post" ACTION="form1.asp">
<font <% if arrError(0) then %> style="color:red;" <% end if %>>
Enter your Email here:
<input type="text" size="20" name="Email">
</font>
<input type="submit" name="Submit" value="Submit">
</FORM>
</BODY>
</HTML>
Let's analyze this code. The first four lines, we are just setting and initializing variables. In the for loop, we loop through the number of required fields, call a function to determine the name of the required field, and check to see if that field in the Request.Form object is not empty. If it is, we add that field to an array, which we'll use later, and generate an error message for the user. The next three functions are simply support functions for the for loop.
In the actual HTML code, you'll notice two new things. The first is the line to display the Errormsg. This string we built in the for loop, and theoretically, it contains a user friendly string that tells the user what they forgot to fill out. In this case, if I left out an email address in the textbox, when I press submit, the same page will come back saying:
"You forgot to enter an Email"
The next thing you'll notice is the if statement in the HTML portion of the code. Here, we check if the array element was set for that item in the for loop above, and if it is, display the next few words in red. This draws the user's attention to exactly where they should go. This is a very nice way to handle errors, and ensures that users will get the hint.
With the traditional redirection form submissions, you have no real way to point out exactly what was wrong, unless you duplicate the entire form again on the second page.
Going Back
Now let's say that the user did enter something in this field, but that it just happens to be wrong or invalid (i.e. it wasn't a properly formed email address). You can display this nice error, but whatever the user already entered in the box will be gone! This isn't a major problem in this case, but imagine if you have 50 fields on your form, the user would have to re-enter all 50 items! That's a pain. Fortunately, there's a very simple way to get around that:
<FORM METHOD="GET" ACTION="form1.asp">
<font <% if arrError(0) then %> style="color:red;" <% end if %>>
Enter your Email here:
<input type="text" size="20" name="Email" value="<% = strText %>">
</font>
<input type="submit" name="Submit">
</FORM>
By adding the "value =" part, the value the user will remain entered, and they won't have to retype it. Note that for non text box fields, you'll have to do a bit more checking to pre-select the field:
<%
...
country = Request.Form("country")
%>
...
<select name="country">
<option value></option>
<option value="United States"
<% if country="United States" then %>SELECTED<%end if%>
>United States</option>
<option value="Afghanistan"
<% if country="Afghanistan" then %>SELECTED<%end if%>
>Afghanistan</option>
<option value="Albania"
<% if country="Albania" then %>SELECTED<%end if%>
>Albania</option>
...
This way, the proper item in the select box will be selected.
Enter to Submit
With traditional redirection form submission, a user could usually just hit the enter key, and the form would be submitted. This could be a good or bad thing depending on your view. With self-referencing forms, users can no longer do this because of the
if Request.Form("submit") = "Submit" then
statement in the beginning of our ASP code. When a user hits enter, the submit button does not send its value, and so nothing will happen. One way to get around this is to change the above line to:
if Request.Form("submit") = "Submit" OR if Request.Form("submit") = "" and Request.QueryString("submit") = "y" then
And change the form tag to this:
<FORM METHOD="GET" ACTION="form1.asp?submit=y">
Now, no matter how you submit the form, the submit action will be triggered.
Conclusion
You should now be well on your way to creating truly responsive and well-designed web sites. Know, however, that even though self-referencing forms are a fantastic tool, they are not always the best solution. You may occasionally still have to resort to using the old redirection method based forms.
