In this chapter you will move beyond the simple ability to create dynamic pages and process data into the realm. of interactivity. You will look at standard HTML forms itlid the way they can be integrated with ColdFusion’s capabilities to create fully interactive Web-based applications.
The use of forms with ColdFusion can fulfill several needs including the ability to search edit and add information to databases; to read and send e-mail; to create sophisticated search engines for Web sites; and more. Because ColdFusion is so commonly used to integrate Web-based interfaces with information stored in databases we will present database examples throughout this chapter. Still the fundamental principles apply to any type of interactive data access and you will see many examples of using forms to manipulate information from other sources through out this book
You will start by learning how easy it is to use regular HTML tags to create forms that are populated with dynamic information. From there, you will look at how to work with data submitted from forms and at more advanced topics related to the use of check boxes and multiple select lists.
Finally you will look at dynamic ColdFusion forms created using the CFFORM tag and a series of related Coldfusion tags such as CFINPUT CFGRID and CFTREE.These forms make it even easier to create it dynamically populated form provide features lacking in a basic HTML form for data validation and offer input controls such as hierarchical trees and grids.
Creating Dynamically populated Forms
In many parts of this chapter you will work with a table of employee data called Employees in a data source called Employee Data. This database is outlined in Table 15.1.
To begin, you need to learn how to dynamically populate form-based data from a database. To do this, you will create a form that reflects the data in this table. But you need to consider what the empty form looks like. Listing 15.1 creates a simple form.
<Hl>Employee Data: Employee #</Hl>
<FORM METHOD*POST ACTION-doform.cfm ><TABLE BORDER=Q CELLSPACING=S>
<TO><INPUT TYPE-text NAME#LastName SIiE~2Q></TO>
<TD><INPUT TYPE*text NAME-FirstName SIZE-20></TD>
<TD><INPUT TYPE-text NAME-Gender SIZEzl></TD>
<TD><INPUT TYPE-text NAME*Salary SIZE=lO></TD>
This code produces a form that looks like the one in Figure 15.:.
<CFQUERY NAME-‘Employee’ OATASOURCE-‘EmployeeData’>
<CFOUTPUT QUERY-‘Employee’ MAXROWS-D
<HDEmployee Data: Employee #IO-</HD
<FORM METHOO-POST ACTION-doform.cfm >
<TABLE BORDER-O CELLSPACING-5>
<TDXINPUT TYPE'”text NAME-LastName SI2E”’20 VAL E-‘ astN.:.~I’:)<‘JTt~>
<TO>First Name /TO>
<TOXIN PUT TYPE-text NAME-Fi rstName SIZE-20 VALUE-‘.F rst”a.o’l’.”XITrr>
.<TO><INPUT TYPE-text NAME~ender SIZE-1 VALUE-‘tGender”X >
<TDXINPUT TYPE-text NAME-Salary SIZE-10 VALUE-‘ Sala ‘X >
To create a truly useful form though you need to be able to pass along an employee ID number and then have the data for the relevant employee displayed. To do this you can use URL parameters to pass the ID using a URL such as form. cfm?ID-l to request a form for the employee with ID 1
Simply adjust Y0l.4rquery as follows:
<CFQUERY NAME-‘Employee’ DATASOURCE-‘EmployeeOata’)
The main problem is that if no URL parameter named ID is available, then you will get an error like the one in Figure 15.3
This problem is easily fixed using the CFPARAM tag that you learned about in Chapter 4 “Creating and Manipulating Variables.” Using this tag, you specify a default value for the URL. IO parameter, should it not exist
<CFPARAM NAME-‘URL.IO’ DEFAULT-‘1’)
<CPQUERY NAME-‘Employee’ DATASOURCE-‘EmployeeOata’)
SELECT . *
Of course now that you are allowing users to specify which employee record to request from the database you need to make sure that an employee exists To do that you can use CFIF and CFELSE tags and test the value of Employee. Record Count to see whether any employee records existed in the database for the specified ID number. listing 15.3 provides the code.
If no 10 is specified the default is to display the employee with 10 1.If the specified employee does not exist then a message like the one in Figure 15.5 is displayed.
Although the form you have created is useful, some refinement could make it better. Specifically, the selection of gender can be better presented as either a select field or a radio button fielri.
This is fairly simple. Let’s start with the select field alternative. The basic syntax of a select field is
_ <OPTION VALUE-‘F’)Female
Put into your previous template, this code renerates a drop-down list like the one shown in Figure 15.6
However a default value is not selected which means that regardless of the data in the database the first item in the list is selected. You can. resolve this problem with a combination of the following CFIF tags:
<OPTION VALUE-‘F'<CFIF Gender is ‘F’) SELECTEO</CFIF»Female
<OPTION’VALUE-‘M'<CFIF Gender ;s ‘M’) SELECTED</CFIF)>Male
The logic here is fairly simple: For each entry iri th~ list, check whether the person’s gender in the database matches, and if it does add the SELECTED attribute to the OPTION. tag. Therefore for a male employee the appropriate entry is automatically selected as in Figure 15.7
Similarly you can use the same approach to use radio buttons for gender. The basic code would look something like this
<INPUT TYPE~radio VALUE-‘F’>Female
<INPUT TYPE-radio VALUE-‘M’>Male
If you put rhis code into your template, then the set of radio buttons comes up unselected- that is, a value is not selected. You can apply the same CFIF logic to force selection of the correct option
<INPUT TYPE-radio NAME-Gender VALUE-‘F'<CFIF Gender is ‘F’> CHECKED<jCFIF»Female
<INPUT TYPE-radio NAME-Ge’nder VALUE-‘M'<CFIF Gender 15 ‘M’> CHECKEO<jCFIF>>Male
The results are shown in Figure 15.8