ASP 101 - Active Server Pages 101 - Web05
The Place ASP Developers Go!

Please visit our partners


Windows Technology Windows Technology
15 Seconds
4GuysFromRolla.com
ASP 101
ASP Wire
VB Forums
VB Wire
WinDrivers.com
internet.commerce internet.commerce
Partners & Affiliates














ASP 101 is an
internet.com site
ASP 101 is an internet.com site
IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers

ASP 101 News Flash ASP 101 News Flash



 Top ASP 101 Stories Top ASP 101 Stories
The Top 10 ASP Links @ Microsoft.com
What is Adovbs.inc and Why Do I Need It?
An Overview of ASP.NET

QUICK TIP:
Authenticating Anonymous requests
Show All Tips >>
ASP 101 RSS Feed ASP 101 Updates


Self-Referencing Forms

Self-Referencing Forms

by Chris Payne

Introduction

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.

form1.asp
<HTML>
<HEAD><TITLE>My Form</TITLE></HEAD>
<BODY>
<FORM METHOD="GET" ACTION="form2.asp">
<input type="text" size="20" name="textbox">
<input type="submit" name="Submit">
</FORM>
</BODY>
</HTML>
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.

<FORM METHOD="GET" ACTION="form1.asp">
<input type="text" size="20" name="textbox">
<input type="submit" name="Submit">
</FORM>

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.

Getting Started

Let's take a look at some sample code:

form1.asp
<%
dim strText
strText = Request.Querystring("textbox")
%>
<HTML>
<HEAD><TITLE>My Form</TITLE></HEAD>
<BODY>
<FORM METHOD="GET" ACTION="form1.asp">
<input type="text" size="20" name="textbox">
<input type="submit" name="Submit">
</FORM>
</BODY>
</HTML>
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.

Happy scripting!

Related Articles


Home |  News |  Samples |  Articles |  Lessons |  Resources |  Forum |  Links |  Search |  Feedback

Internet.com
The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers