![]() ![]() ![]() |
||
|
In this exercise, you develop the Trip Edit page, which provides a data entry form that is used to add new trips and edit existing trips. You validate the data entered against Compass Travel business rules. The fields required to capture trip information are the same as those on the Trip Detail page that you used to display trip information in Lesson 6: Creating a Main Application Page. The following figure shows the Trip Edit page:
The page appears when the user clicks the Add or Edit button on the main Trip Maintenance application page (tripdetail.cfm).
<html> <head><title>Compass Travel Trip Maintenance</title></head> <body> <form action="tripeditaction.cfm" method="post"> <!--- Field: Trip Maintenance Image ---> <IMG src="images/tripmaintenance.gif"> <P> <table> <!--- Field: tripName ---> <TR> <TD valign="top"> Trip Name </TD> <TD><INPUT type="text" name=tripName size="50"></TD> </TR> <!--- Field: eventType ---> <tr> <td valign="top">Type of Event</td> <td><select size="1" name="eventType"> <option value="1" selected>Surfing</option> <option value="2">Mountain Climbing</option> <option value="3">Mountain Biking</option> </select> </td> </tr> <!--- Field: tripDescription ---> <TR> <TD valign="top"> Trip Description </TD> <TD> <textarea cols="50" rows="5" name="tripDescription"></textarea> </TD> </TR> <!--- Field: tripLocation ---> <TR> <TD valign="top">Trip Location</TD> <TD><INPUT name=tripLocation size=50></TD> </TR> <!--- Field: departureDate ---> <TR> <TD valign="top"> Departure Date</TD> <TD><INPUT name=departureDate size=10></TD> </TR> <!--- Field: returnDate ---> <TR> <TD valign="top"> Return Date</TD> <TD><INPUT name=returnDate size=10></TD> </TR> <!--- Field: numberPeople ---> <TR> <TD valign="top">Number of People</TD> <TD><INPUT size=6 name=numberPeople></TD> </TR> <!--- Field: Price ---> <TR> <TD valign="top">Price</TD> <TD><INPUT size=10 name=price></TD> </TR> <!--- Field: baseCost ---> <TR> <TD valign="top"> Base Cost </TD> <TD><INPUT size=10 name=baseCost></TD> </TR> <!--- Field: depositRequired ---> <TR> <TD valign="top"> Deposit Required </TD> <TD><input type="checkbox" name="depositRequired" value="Yes"></TD> </TR> <!--- Field: tripLeader ---> <TR> <TD valign="top">Trip Leader</TD> <TD><INPUT maxLength=50 size=50 name=tripLeader></TD> </TR> <!--- Field: photo ---> <TR> <TD valign="top">Photo File Name</TD> <TD><INPUT maxLength=50 size=50 name=photo></TD> </TR> </table> <p> <input type="submit" value="Save"> <input type="submit" value="Cancel" name="btnCancel"> </p> </form> </body> </html>
The following table explains the use of some of the HTML tags in the Trip Edit page. For more information on HTML, consult any HTML primer.
Tag |
Description |
---|---|
Form |
You create a data entry form by using the <form action="tripeditaction.cfm" Method= "Post"> Here, the |
Table |
You can format a data entry form and display its controls neatly, by using the table tag, |
Form Controls |
The form requires controls to collect and submit user input. There are a variety of types of form controls that you can use. For this lesson, you will use the following controls:
|
An error occurs.
If you view the form source (tripedit.cfm) in an editor, you can see that the <form>
tag has an action
attribute. This attribute indicates the page that receives the form values posted by the tripedit.cfm page. Because you have not yet created the tripeditaction.cfm page, ColdFusion MX sends an error.
At this point, this form does not store any information in the database and does not enforce any business rules of Compass Travel. In the next exercise, you develop the action page to enforce the business rules.
|
||
![]() ![]() ![]() |