As Web sites become more powerful by integrating database functionality, we are forced to build more robust user interfaces for these sites. This new generation of UIs must be developed with all types of users in mind. Everyone from experienced power users to little old ladies from Pasadena are on the Web and using the interfaces we are building. Our HTML writing skills are being pushed to the limit, as our sites have to do more and more. Forms are the integral part of Web applications and also are the biggest stumbling block. Forms are where the information goes in and where it sometimes comes back out, and is also the primary location where your data gets messed up.
I used to have a lot of data problems, especially on forms that had drop-down menus, check boxes, and radio buttons. For instance, I would have a form where a user could update or edit a record from the database. It was easy enough to populate a drop-down menu with data from the database, but what if you needed the item that was fifth from the top to be automatically selected? If you didn’t get the option to be selected and the user submitted the form, the database record was updated with the first option on the drop down. Not good. The result was many headaches and angry clients.
The Solution
Finally, while working on a project for a North Carolina government agency, this issue really reared its ugly head. I was working with a form that was central to the entire application. The form was infested with drop-down menus that all had to have certain options selected automatically. My solution was a quick one, and one I initially thought was foolish, but it ended up being something that I have used hundreds of times.
I put the work of selecting options into a function. Since most active server pages that I write have some sort of include file at the beginning of the page, I simply added the function to that include, which will make it available anywhere I am in the site.
Remember that subs and functions are different. According to the MSDN Library, a function procedure is a “separate procedure that can take arguments, perform a series of statements, and change the value of its arguments. Unlike a Sub procedure, a Function procedure can return a value to the calling procedure.”
Drop-Down Menus
We’ll look at drop-down menus first, since they were the original purpose of this function. Here’s the code:
Function fselectMe (value1,value2)
If value1 = value2 Then
fSelectMe = "SELECTED"
Else
fSelectMe = ""
End If
End Function
With that function available, I can use fselectMe in my drop-down menu HTML to automatically select an option. This code snippet assumes that you are populating your drop down from a database table.
<%MyOS = “WindowsNT”%>
<select name = “operating_systems”>
<%Do Until objRS.EOF%>
<option value="<%= objRS.fields(“OS”)%>"<%=fselectMe(objRS.fields(“OS”),MyOS)%>>
<%= objRS.fields(1)%>
</option>
<%objRS.MoveNext%>
<%Loop%>
</select>
Of course, some code is missing from here, but I probably don’t need to show you how to open the record set, etc.
In this snippet, we are looping through results of a query to pull a list of operating systems into a drop-down menu. Right before this drop down, I set MyOS to “WindowsNT.” This is a value that could have come from user input or somewhere else, but it is the option that you want to select in the drop down. Now, as we are looping, the value for objRS.fields(“OS”) is changing. It will loop through other operating systems, such as “Windows95,” “Mac OS,” “Windows98,” “Linux,” and so on. Of course, the result of fselectMe for all of these is false, so these will not be options in the select list. Once we hit the loop where objRS.fields(“OS”) is equal to “WindowsNT,” fselectMe becomes true and the WindowsNT option is the selected option, no matter where it is in the list.
A modified version of this function also works well on check boxes and radio buttons, as follows:
Function fCheckMe (value1,value2)
If value1 = value2 Then
fCheckMe = "CHECKED"
Else
fCheckMe = ""
End If
End Function
This works the same way for check boxes as it does for drop-down menus:
<%Do Until objRS.EOF%>
<input type=”checkbox” name=”os” value="<%= objRS.fields(“OS”)%>"
<%=fcheckMe(objRS.fields(“OS”),MyOS)%>>
<%objRS.MoveNext%>
<%Loop%>
And once the code is run, we get:
<input type=”checkbox” name =”os” value=”Windows95”>
<input type=”checkbox” name =”os” value=”Windows98”>
<input type=”checkbox” name =”os” value=”Mac OS”>
<input type=”checkbox” name =”os” value=”WindowsNT” CHECKED>
<input type=”checkbox” name =”os” value=”Linux”>
And this function is implemented as the following for radio buttons:
<input type=”checkbox” name =”os” value=”Windows95”>
<input type=”checkbox” name =”os” value=”Windows98”>
<input type=”checkbox” name =”os” value=”Mac OS”>
<input type=”checkbox” name =”os” value=”WindowsNT” CHECKED>
<input type=”checkbox” name =”os” value=”Linux”>
One Last Trick
This function can also be used in another way. If you have some sort of mathematical or Boolean operation that you want to use to determine if a form value should be selected, you can use this code:
Function fpickMe (value1)
If value1 Then
fpickMe = "CHECKED"
Else
fpickMe = ""
End If
End Function
And as an example, this function can be deployed on a series of check boxes as:
Which will return the following HTML, since x is less than y:
<input type=”checkbox” name =”answer” value=”1”>
<input type=”checkbox” name =”answer” value=”2” CHECKED>
Summary
There is an important rule to remember when you are using this function: When you are putting values into the function, remember to make sure both values are of the same type. If you try to compare apples to oranges, it won’t work. I didn’t CString the values in my first three examples because it looked way too messy for an example. Plus, string values usually don’t need to be set as strings for comparison. Yes, I am the original lazy programmer. I’m still trying to figure out what all the buzz about Option Explicit is. (Of course, I am kidding.)
Regardless of being lazy or not, make sure to CInt your integers, CDate your dates, CCur your currency values, and so forth. If you try to implement these functions and they don’t work, check to make sure your data types are right.
The use of functions in general is something that seems to have been ignored in the ASP world. They are incredibly useful for taking routine tasks and making them portable and reusable. The functions outlined here only scratch the surface of using similar operations on form elements.
About the Author
Mike Tickle is a professional Web developer, currently employed by Manpower Technical Services and serving as a contract developer at GlaxoWellcome, Inc., in Research Triangle Park, N.C. Mike is also the lead (and only) developer at Activebits Internet Technologies, a small Web-development company supporting small businesses on the eastern seaboard of the United States. He can be contacted at mike@activebits.com.
Developers who don't want to spend a lot of money on SQL Server and who want a database that's more robust than Access may find MySQL to be a pleasant alternative. This introductory article covers the bare essentials for getting MySQL installed and running in the Win32 environment. [Read This Article][Top]
There is never a guarantee of project success when endeavoring to build a sophisticated application. However, there are established steps to follow that will ensure a clear, concise scope, support for the team involved, and a solid opportunity for successful deployment. [Read This Article][Top]
If your SQL Server is exposed to the Internet, then hackers are probing it. This article shows how to secure a SQL Server database that's being used with a Web application [Read This Article][Top]
Feel intimidated by .NET? This article by Rob Chartier is designed to ease any level VBScripter (ASP) into .NET by clarifying some OOP concepts. [Read This Article][Top]
A few members of the 15 Seconds discussion list talk about the proper way to use methods in order to prevent ADO object errors.
[Read This Article][Top]
Solomon Shaffer explores the life cycle of an ASP.NET page from initialization to unloading. He also explains the various methods to override ASP.NET server-side events. [Read This Article][Top]
Rob Chartier creates a simple portable and reusable address book in .NET to demonstrate the power of N-tier application architecture. Complete source code included! [Read This Article][Top]
Learn about N-tier application architecture and realize that developing with multiple layers produces a flexible and reusable application for distribution to any number of client interfaces. [Read This Article][Top]
Learn about N-tier application architecture and realize that developing with multiple layers produces a flexible and reusable application for distribution to any number of client interfaces. [Read This Article][Top]
Mailing List
Want to receive email when the next article is published? Just Click Here to sign up.
