Passing URL Variables

Pass the user's selection to a new page within an HTML anchor tag. When you do this:

• The value of the user's selection is added to the end of the URL.
• The selection value is referred to as a URL variable.
• You can reference URL variables on the action page as you would any other variables.

When working with URL variables:

• Prefix URL variable's with URL.
• A URL variable's scope is the page that it passes to.

Passing URL syntax

<A HREF="URL?URLVariable">LinkName</A>

• Use a question mark to separate the URL variable from the URL address.

Passing URL variable examples

To create a hyperlink list that allows users to select an employee to update, you would enter this code:

<A HREF="UpdateForm.cfm?Employee_id=18">Jeremy Allaire</A>
<A HREF="UpdateForm.cfm?Employee_id=19">John Allaire</A>
<A HREF="UpdateForm.cfm?Employee_id=20">Marcello Fabiano</A>

• The UpdateForm.cfm page appears in the browser when the user clicks on an employee name.
• #URL.Employee_IDN# passes to that page.
• Once passed, you can reference the URL variable in SQL statements.

To generate a hyperlink list so that users can select an employee to update, you enter this code on the listing page:

<CFQUERY NAME="GetEmployees" DATASOURCE="HRApp">
    SELECT     FirstName, LastName, Employee_ID
    FROM     Employees
</CFQUERY>

<CFOUTPUT QUERY="GetEmployees">
    <A HREF="UpdateForm.cfm?Employee_ID=#GetEmployees.Employee_ID#">
    #GetEmployees.FirstName# #GetEmployees.LastName#</A><BR>
</CFOUTPUT>

• The UpdateForm.cfm page appears in the browser when the user clicks on an employee name.
• #URL.Employee_ID# passes to that page.
• Once passed, you can reference the URL variable to generate SQL.

Using URL variables examples

This update form's query code retrieves database information by referencing the URL variable passed from the hyperlink listing page:

<CFQUERY NAME="GetEmployeeDetails" DATASOURCE="HRApp">
    SELECT     FirstName, LastName,
    Department_ID, StartDate,
    Salary, Contract
    FROM     Employees    
    WHERE  Employee_ID = #URL.Employee_ID#
</CFQUERY>

• Prefix URL variables when referencing them in a SQL statement.
• Once retrieved, you can use the data to populate the fields on the form.
• Each form control requires slightly different coding.

This code prefills the employee first name field using the VALUE attribute and dataset values:

<INPUT TYPE="Text" NAME="FirstName" SIZE="20" MAXLENGTH="50" 
VALUE="<CFOUTPUT>#GetEmployeeDetails.FirstName#</CFOUTPUT>">

• Surround the variable with pound signs within a CFOUTPUT block tag.
• Place the CFOUTPUT tag inside the input tag.

This code prefills the department select box using conditional logic statements inside the OPTION tag:

Department<BR>
<SELECT NAME="Department_ID">
<CFOUTPUT QUERY="GetDepartments">
    <OPTION VALUE="#Department_ID#" 
        <CFIF GetEmployeeDetails.Department_ID IS     
            GetDepartments.Department_ID>
            SELECTED
        </CFIF>>
        #Department_Name#
    </OPTION>
</CFOUTPUT>
</SELECT>

• When a field value matches the employee's department, that department populates the selectbox.

This code prefills the contract checkbox using conditional logic inside the INPUT tag:

<INPUT TYPE="Checkbox" NAME="Contract" VALUE="Yes" 
    <CFIF GetEmployeeDetails.Contract IS "Yes">CHECKED
    </CFIF>>Yes

• If contract is true, the checkbox is enabled.

To build the hyperlink list to pass URL parameters:

1. Create a new application page in HomeSite.
2. Save the page as UpdateList.cfm.
3. Title the page Chapter 10 - Employee Update List.
4. Create a page heading after the opening BODY tag:

<H4>Employee Update Listing</H4> 

5. Query the Employees table and retrieve FirstName, LastName, and Employee_ID:

<CFQUERY NAME="GetEmployees" DATASOURCE="HRExpress">
    SELECT FirstName, LastName, Employee_ID
    FROM Employees
</CFQUERY>

6. Add another heading to instruct the user to select an employee:

<H4>Select an Employee to Update</H4>

7. Create a CFOUTPUT block that references the GetEmployees query:

<CFOUTPUT QUERY="GetEmployees">
</CFOUTPUT>

8. Insert an anchor tag within the CFOUTPUT block so that GetEmployees.FirstName and GetEmployees.LastName will appear as a hyperlink for each employee:

<CFOUTPUT QUERY="GetEmployees">
    <A HREF=>#GetEmployees.FirstName# #GetEmployees.LastName#</A>
</CFOUTPUT>

9. Assign an HREF attribute to the anchor tag so that when a user selects an employee, the hyperlink passes the Employee_ID variable to the UpdateForm.cfm page:

<A HREF="UpdateForm.cfm?Employee_ID=
#GetEmployees.Employee_ID#">

10. Format the hyperlink list by adding a BR tag after the anchor tag.
11. Save the page.

Click here to see UpdateList.cfm's code.

Move on to the next procedure and create the update form.

To create the update form:

1. Open InsertForm.cfm in HomeSite.
2. Save the form as UpdateForm.cfm.
3. Title the page Chapter 10 - Update Employee Form.
4. Change the page heading to Update Employee Form:

<H4>Update Employee Form</H4> 

5. After the opening BODY tag, create a query named GetEmployeeDetails to retrieve data from the Employees table based on the URL parameter that will pass from the UpdateList.cfm page:

<CFQUERY NAME="GetEmployeeDetails" DATASOURCE="HRExpress">
    SELECT FirstName, LastName,
    Department_ID, StartDate, Salary,Contract
    FROM Employees
    WHERE Employee_ID=#URL.Employee_ID#
</CFQUERY >

6. Change the FORM tag ACTION attribute to UpdateAction.cfm:

<FORM ACTION="UPDATEACTION.CFM" METHOD="POST">

7. Add a hidden form control to pass the URL.Employee_ID to UpdateForm.cfm:

<INPUT TYPE="HIDDEN" NAME="Employee_ID" VALUE="<CFOUTPUT> 
#URL.Employee_ID# </CFOUTPUT>">

8. Rename the submit button Update Employee:

<INPUT TYPE="Submit" NAME="SubmitButton" VALUE="Update Employee">

9. Save the form.

Remain in the form and move on to the next procedure to prefill update form fields.

To prefill update form fields:

1. Modify the FirstName and LastName fields to populate them with GetEmployeesDetails query data:

<INPUT TYPE="Text" NAME="FirstName" SIZE="20" MAXLENGTH="50"  
VALUE="<CFOUTPUT>#GetEmployeeDetails.FirstName# </CFOUTPUT>">
<INPUT TYPE="Text" NAME="LastName" SIZE="20" MAXLENGTH="50" 
VALUE="<CFOUTPUT>#GetEmployeeDetails.LastName# </CFOUTPUT>">

2. Modify the select box so that the selected Department_Name is based on the GetEmployeeDetails query:

<SELECT NAME="Department_ID">
<CFOUTPUT QUERY="GetDepartments">
    <OPTION VALUE="#Department_ID#" 
        <CFIF GetEmployeeDetails.Department_ID IS     
        GetDepartments.Department_ID> 
        SELECTED 
        </CFIF>> 
    #Department_Name# 
    </OPTION>
</CFOUTPUT>
</SELECT>

3. Modify the StartDate and Salary fields to populate them with GetEmployeeDetails query data:

<INPUT TYPE="Text" NAME="StartDate" SIZE="16" MAXLENGTH="16"  VALUE="
<CFOUTPUT>#GetEmployeeDetails.StartDate#</CFOUTPUT>">
<INPUT TYPE="Text" NAME="Salary" SIZE="10" MAXLENGTH="10" VALUE="
<CFOUTPUT>#GetEmployeeDetails.Salary#</CFOUTPUT>">

4. Enable the checkbox based on GetEmployeeDetails query data:

<INPUT TYPE="Checkbox" NAME="Contract" VALUE="Yes" <CFIF 
GetEmployeeDetails.Contract IS "Yes">CHECKED
</CFIF>>

5. Save the page.

Click here to see UpdateForm.cfm's code.

Move on to the next procedure to create an update action page.

Copyright © 1999, Allaire Corporation. All rights reserved.