Previous Section  < Day Day Up >  Next Section

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 typing梩ext, text area, and password fields梒an 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 ( ). 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). Dynamic radio buttons

You add dynamic radio buttons like this:

  1. 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 name?span class="docEmphasis">shipping, for instance梑ut their checked values would match the different values stored in the database: USPS, FedEx, and UPS.

  2. 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.
  3. 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.

  4. 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.


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

  5. Click OK to close the window.

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

Dynamic Checkboxes work almost the same way:

  1. Add a checkbox to the page.

    This process is described in Section 11.3.3.

  2. 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.
  3. If the form has more than one checkbox, select a checkbox from the first menu.

    Select the checkbox you wish to control dynamically.

  4. 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.

  5. 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.)

  6. 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)梬here 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:

  1. 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.


    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

  2. 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 sells梑ooks, 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.)

  3. 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.
  4. 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 hand梪nchanging 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 change桝 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).

  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.

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

    Menu and list items consist of a label梬hat the user actually sees in the menu梐nd a value梩he 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.

  7. 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.

  8. 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.

    Previous Section  < Day Day Up >  Next Section