close ad
 
Important WebAssist Announcement
open ad
View Menu

Web development tutorial

Change a text field to a dynamic dropdown

Tutorial created by Jared Lui, Synectx Web Design/Development

Categories: Data Bridge, Dreamweaver

rating

Make search forms friendlier by replacing text input fields with dynamic dropdowns. This tutorial shows you how quick and simple it is.

arrow downOverview

The DataAssist wizard allows you to link fields to your database creating dynamic forms, however there may come a time when you want to change a text input field to a dynamically filled dropdown field manually. The following steps show you how to do this quickly and easily.

The simple search form below has only two fields. We want to make it so that the user doesn't have to guess at the data but rather have dropdowns that display what is actually in the database.

arrow downAdd the dynamic data

In the Server Behaviors panel notice the two current dynamic text fields (UserID ) and (MasBarID). For now we will leave these as we can borrow some code from them.

Step 1: Adding the dynamic data

Our first step will create a link to our database and determine which set of data we want to display in our dropdown. To do this we must create a recordset.

  1. Click the Add Server Behavior icon (+Plus sign pictured above).
  2. Choose Recordset, which opens the Recordset dialog below.

    1. Give your recordset a name
    2. Choose the Connection and Table
    3. Select which columns you need (generally you will only need 1 or 2 columns; for your Label and Value; sometimes your value and label are the same)
    4. Optionally, you can filter and sort your data


  3. Click OK to create your new recordset.

Step 2: Gathering information

This step helps you speed through adding the dropdown field in the next step. You are simply getting the information you'll need in the step after this.

  1. In the Server Behaviors panel, select the current text field (UserID); Optionally click the field in design view to select it.
  2. In the Properties Inspector, note the TextField name; Hint: it is also found in parenthesis in the Servers Behaviors panel (UserID)
  3. Copy the code in the 'Init val' field. This is important. See the image below.

Step 3: Create the dropdown

Here we will actually add the dropdown field and set all of its options using the information obtained in the previous step and customizing it to your needs.

  1. Next to your current textfield insert a select list/menu (click your current field in design view and click your right arrow once)
  2. Add a Select List/Menu field from the Forms tools.
  3. Click your new select list/menu in design view to select it
  4. Enter the Select name which is the TextField name you recall from Step Two
  5. Click the Dynamic... button to open the Dynamic List/Menu dialog
  6. Verify you have the correct Menu selected; generally this is the only menu on the page
  7. Enter any static options needed

    1. Usually I will give the user a blank value as the default. This acts as a "show all" results option.

      1. Click the +Plus sign to add a new Static option
      2. Click the word "value" in the list to highlight it then delete it
      3. Tab over or click to the label and edit it to make sense for your dropdown; generally "Show All (whatever)" works in most cases.


    2. You can add additional hard coded options if needed


  8. Now choose the recordset that this dropdown will use (rsVendors)
  9. Choose the columns for the Values and Labels
  10. In the Select value equal to field, paste the code you copied from the 'Init val' field from the old textfield
  11. Click OK to add the dynamic code

Step 4: Clean-up

Your first dynamic dropdown field is done. Now all you need to do is to remove the old textfield that is no longer needed

  1. Select the Dynamic Text Field (UserID) from the Server Behaviors panel
  2. Click the 'minus' icon to remove it
  3. What? You thought there was more?

arrow downThat's it! Let's recap.

That's all there is to changing a dynamic text field to a dynamic dropdown. To recap, let's add the second dropdown.

Step 1: Create a recordset to populate the dropdown

  1. In Server Behaviors click the +Plus sign icon and select Recordset
  2. Give your new recordset a name; choose the connection and table; select columns for values and labels and optionally filter and sort the data; click OK

Step 2: Borrow code

  1. Select the current textfield
  2. In Properties Inspector, note the TextField name and copy the Init val code

Step 3: Create new dropdown

  1. Click the current field in design view; click right arrow key once
  2. Insert Select List/Menu from Forms tools
  3. Click the new field in design view
  4. In Properties Inspector, edit Select name recalling old TextField name
  5. Click Dynamic... button
  6. Verify Menu; Add Static options; Select the recordset for this dropdown and select which columns to use for Values and Labels
  7. Paste code from Init val to Select value equal to

Step 4: Delete old text field

  1. Highlight Dynamic Text Field
  2. Click 'minus' icon to remove it

arrow downAll done!

If you have done everything correctly your form should now look like this and could probably be done in less time than it took to read this tutorial.

arrow downReviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments
rating

Team WebAssist: 10 Years, 11 Months, 5 Days, 18 Hours, 53 Minutes ago

Hi Jared, Love the tutorials you are submitting. Just a no-big-deal-but-we-prefer-it-this-way :) comment for this tutorial - or future tutorials if you don't want to edit this one. We'd prefer to only use a change in text color if you absolutely have to draw attention to one major thing. We don't want blues to detract from links being blue site-wide or other text colors to start detracting from our design uniformity. But you can still bold text and change it in size. Again, no biggie. Just a preference.

rating

Jared Lui: 10 Years, 11 Months, 5 Days, 18 Hours, 32 Minutes ago

Duly noted. I'll concede the text color. Just don't ask me to get rid of my run-on sentences.

rating

Christopher West: 10 Years, 11 Months, 5 Days, 15 Hours, 52 Minutes ago

Like the tutorial Jared....im taking notes as i tend to woffle a bit when I write. Like your style.

rating

Jared Lui: 10 Years, 11 Months, 5 Days, 1 Hour, 55 Minutes ago

Glad you like it Christopher. I have three of yours bookmarked and hope to have free time again to design and utilize them.

Team WebAssist: 10 Years, 11 Months, 1 Day, 17 Hours, 42 Minutes ago

Thanks, Jared. Now we just need a "like" button like on Facebook so we can like your comment. :)

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.