Dreamweaver.MX.1002004.The.Missing.Manual [Electronic resources] نسخه متنی

23.3 Dynamic Form Fields

Forms don't have to be empty. When a Web browser loads a form page, one or more
fields may already be filled with information from a database.

You can use this feature for update forms on your site. It can also come in handy when,
for example, you've created an Employee Directory section for your company's site.
Suppose that, on the Insert New Employee page, you built a pop-up menu that lets
the Human Resources department select a department for the new employee.

You, the designer, could create a menu like this by manually typing the name of each
department. But what if the names of the departments change, or new departments
are added? You'd have to reopen the page and edit the form field each time. But if you
opted for a dynamic menu instead, the page would build the Departments pop-up
menu automatically by retrieving the current list of departments from the database
(see Figure 23-9).

Dreamweaver's Insert Record Update Form wizard creates these kinds of dynamic
form fields automatically. In essence, a dynamic form field is a form element whose
value comes from dynamic data in the Bindings panel. The dynamic data can come from a recordset (as with an update form), a form or URL parameter, or even a cookie
or session variable (see Section 24.2).

Dynamic form fields come
in handy with update forms.
Form fields are already
filled out with database
information that's ready to
be edited. Menus can also be
dynamically generated from
records in a recordset. In
this case, the menu (shown
open) lists records retrieved
directly from a database
table containing the product
categories for the National
Exasperater online store.

Whenever you wish to use a dynamic form field, start by creating a form. Add all form
fields that might include dynamic content. (Not all the fields have to be dynamic,
however. In the employee directory example discussed earlier, only the Department
menu on the Insert New Employee form would be dynamic. The other fields for
entering an employee's information would be empty.)

Next, add a recordset, request variable, session variable, or application variable to the
Bindings panel (see Section 22.2.1). Then finally, attach the dynamic data to the form field.
The process for binding dynamic data depends on the type of form field.

23.3.1 Dynamic Text Form Fields

Any form field that accepts typingtext, text area, and password fieldscan be
dynamic. For example, if a site requires a user login, you could include a "remember
me" feature, so that when a visitor who's previously signed in returns to the site, the
user name and password will already be filled out.

If you like the idea of a "remember me" feature for password-protected pages, try the Remember Me extension from Basic-UltraDev ( www.basic-ultradev.com/extensions/ ). This free extension works with ASP, JSP, and ColdFusion pages.

You can add dynamic data to a text field (also called binding data to the field) using
any of the methods described below. (Remember, you must first have added the form
field to the page and added the dynamic data to the Bindings panel. This means adding
a recordset to a page, as described in Section 22.1.2, or creating additional data sources
[like cookies or session variables] as described in Section 24.2).

In Design view, drag the dynamic data item from the Bindings panel and drop it
onto the form field.

In Design view, select the text field. In the Bindings panel, select the dynamic data
item and click the Bind button.

Select the text field. In the Property inspector, click the dynamic data button (the
lightning bolt). The Dynamic data window appears (see Figure 23-7); select the
dynamic data item from the list and click OK.

In the Server Behaviors panel, click the + button and select Dynamic Form Elements
Dynamic Text Field. In the window that appears, you'll see a Text field
menu. Select the text field you wish to add dynamic data to; then click the lightning
bolt button to open the dynamic data window. Select the dynamic data item from
the list and click OK.

You can bind dynamic data to a hidden field using the same steps.

After binding the data to the field, the name of the data item appears inside the
field{rsDetails.adName}, for example. If you're using Live Data view (Section 22.5),
the actual data from the database appears inside the field.

Dreamweaver lets you format dynamic data in a form field just like dynamic text you add to a
page (see Section 22.2.2). Be careful with this option, though. If the form is submitting to a database, data may
sometimes have to be in a certain format.

For example, prices are often stored as numbers inside a database. But using Dreamweaver's currency
format, you can make a price appear as $34.00 in a form field. When your visitor submits the form, the $
sign goes along for the ride, causing the database to spit out a horrible error message upon encountering
this nonnumeric character.

To remove dynamic data from a text field, just select the field and click the Unbind
button in the Bindings panel. (Deleting the contents of the field's Init Value box in
the Property inspector also works.)

23.3.2 Dynamic Checkboxes and Radio Buttons

With a text field, you can dynamically change the value of the field. With checkboxes
and radio buttons, however, you can control only their status (checked or unchecked)
dynamically.

You can use this value to select one radio button in a group based on a value in the
database. For example, as part of a product ordering system, shoppers could select
a particular shipping option: USPS, FedEx, or UPS. But after reviewing their orders,
what if they change their minds and choose a different shipping option? When they
return to the order page, you'd want the Shipping Option radio button to reflect the
choice the shopper had made earlier. In other words, you want the page to read the
shipping option for the order from the database, and highlight the radio button that
matches. (You'll find an example of this in the "Building a Page for Editing Database
Records" section of the tutorial starting in Section 23.5.3).

23.3.2.1 Dynamic radio buttons

You add dynamic radio buttons like this:

Add a group of radio buttons to the page.

You should have as many radio buttons as there are possible values stored in the
database column. Remember, if you wish to create a group of related radio buttons,
you must give every button in the group the same name (see Section 11.3.4).

Note, too, that the value of each radio button must also exactly match the values
stored in the database. For example, if a Shipping column in the database stores
USPS, FedEx, or UPS, then the radio group should have three buttons. Each button
would share the same nameshipping, for instancebut their checked values
would match the different values stored in the database: USPS, FedEx, and UPS.

Open the Server Behaviors panel (WindowServer Behaviors). Click the + button
and select Dynamic Form ElementsRarr;Dynamic Radio Buttons.

The Dynamic Radio Buttons window appears (see Figure 23-10).

The Dynamic Radio Buttons
window lists the values of
each button in the group.
By selecting a button from
the list, you can change its
value in the Value field.

From the first menu, choose the radio button group.

If your form has more than one group of radio buttons, select the one you wish
to be dynamic.

Click the dynamic data button (the lightning bolt) to the right of the Select Value
Equal To field.

The Dynamic Data window opens (see Figure 23-7). Select the dynamic data
item for this radio group. In a nutshell, the radio button whose value matches the
dynamic data will be selected. If no radio buttons contain the same value, then
no buttons will be selected.

NOTE

You only set the Select Value Equal To field once per radio group (not once per button in the
group).

Click OK to close the window.

Dreamweaver adds a Dynamic Radio Buttons server behavior to the page.

23.3.2.2 Dynamic checkboxes

Dynamic Checkboxes work almost the same way:

Add a checkbox to the page.

This process is described in Section 11.3.3.

Open the Server Behaviors panel (WindowServer Behaviors); click the + button
and select Dynamic Form ElementsDynamic CheckBox.

The Dynamic CheckBox server behavior
lets you control whether a checkbox is
checked or not based on information
from a database, cookie, URL parameter,
or other piece of dynamic data.

If the form has more than one checkbox, select a checkbox from the first menu.

Select the checkbox you wish to control dynamically.

Click the dynamic data button (the lightning bolt) to the right of the Check If
field.

The Dynamic Data window opens (see Figure 23-7). Select the dynamic data item
for this checkbox.

Type a value into the Equal To box.

If the value from the dynamic data (previous step) matches the value you provide
here, the checkbox will be selected. (If the checkbox is part of an update form, this
should match the value you gave the checkbox from step 1.)

Click OK to close the window.

Dreamweaver adds a Dynamic CheckBox server behavior to the page.

To remove the dynamic properties from a group of radio buttons or a checkbox,
open the Server Behaviors panel (WindowServer Behaviors panels). Among the
list of server behaviors, you'll see the dynamic radio button or checkbox behavior.
It looks something like Dynamic Radio Buttons(group_name) or Dynamic Check
Box(checkbox_name)where group_name or checkbox_name will be replaced with
whatever name you gave the buttons or checkbox. Select it from the list and click the
Remove (-) button. (Pressing the Delete key does the same thing.)

23.3.3 Dynamic Menus and Lists

Dynamic menus and lists are among the most-used form elements. They save you the
effort of having to rebuild traditional menus or lists every time your company opens
a store in a new state, adds a new employee department, or whatever.

To create a dynamic menu or list, proceed as follows:

Create a form and add a menu or list to the page.

For example, choose InsertForm, and then InsertForm ObjectsList/Menu.
This is the same process as adding a menu or list, as described in Section 11.3.4. Don't
add any items to the list, though. That's the whole point of this exercise: Dreamweaver
will build the menu or list automatically.

NOTE

Dreamweaver doesn't provide an automated way to create a Dynamic List or Menu for the ASP.NET server
model. However, it can create one when you use the Update Record Form wizard (see Section 23.2) and you
can build one manually by following the instructions at
www.macromedia.com/support/dreamweaver/ts/documents/how_to_create_dynamic_list.

Add a recordset to the page that includes the information you wish to appear in
the menu or list.

Perhaps you want to create a menu listing the different categories of products your
company sellsbooks, DVDs, CDs, lederhosen, clogs, and so on. If the database
has a table containing the categories, you could then create a recordset that retrieves
the name of each category. (In most cases, you'll also retrieve a primary key, like
the category ID field. The name of the category will appear in the menu, while the
primary key will be the value submitted with the form.)

In the document window, select the menu or list, and click the Dynamic button
on the Property inspector.

The Dynamic List/Menu window opens (see Figure 23-12). The name of the menu
or list you selected appears in the Menu box.

Dreamweaver simplifies the
process of creating automatically
generated menus like
the one pictured in Figure
23-9. Using information
pulled from a database, you
never have to create another
menu by hand.

If you like, add some static options to the menu or list.

A static option is simply a value and label that you enter by handunchanging
menu or list items, appearing at the top of the list, that won't change. It doesn't
come from the recordset you created.

You could use this feature for options not likely to changeAmazon.com may
begin to sell electronics, hors d'oeuvres, and dermatology services, but chances are
good that books will always be among its categories. You can also use it to provide
clear instructions about operating this menu: "Pick a state," or "Choose an option
from this list," for example. Of course, this step is optional. (Adding static options,
works just like a regular menu's List Values box, as described in Section 11.3.5).

From the Options From Recordset menu, choose the recordset you created in
step 2.

You've just told Dreamweaver where the items to be listed in the menu are coming
from.

Choose a table column from the Values menu; choose another column from the
Labels menu.

Menu and list items consist of a labelwhat the user actually sees in the menuand
a valuethe information that's transmitted when the form is submitted. Using
the example in step 1, you would select categoryID (or whatever the name of the
recordset's primary key is) from the Values menu, and categoryName from the
Labels menu. If the label and value are the same, choose the same table column
from both menus.

If you want your menu to have one item preselected, then click the Dynamic data
button (the lightning bolt). In the Dynamic Data window (Figure 23-5), select a
dynamic data item.

This step is optional and most frequently used for an update form. For example,
suppose you create a form for updating information on your catalog of products.
When the update page loads, all of the form fields would already be filled out
with information about a particular product. The menu that lets you specify the
product's category, therefore, should have the name of the category that matches
the database record displayed and preselected.

Click the OK button.

Dreamweaver adds a Dynamic List/Menu server behavior to the page.

You can remove the dynamic menu or list, by selecting and deleting it. To leave the
menu but remove its dynamic properties, open the Server Behaviors panel (Window
Server Behaviors panels). Here, you'll see the dynamic list/menu behavior; it will be
listed as Dynamic List/Menu(menu_name), where menu_name is the name you gave
the menu or list. Select it from the server behavior list and click the Remove (-) button
or press the Delete key.

To edit the behavior, just select the menu in the document window and once again
click the Dynamic button in the Property inspector.