Figure 1: A limitation -- FileMaker.php doesn't have native support for multi-field value lists defined in FileMaker Pro.


Figure 2: Rendered code -- Browser pop-up menus look and act much like pop-up menus in FileMaker Pro.

In general, FileMaker.php does a great job of letting developers pull value lists through to the Web in a variety of simple and intuitive ways. However, this feature of FileMaker.php doesn't extend to multi-field value lists. If you pull a multi-field value list from FileMaker Pro using the API for PHP, you're only going to get the values from the first field selected in the "Specify Fields for Value List" dialog. If you want to display the values from the second field of the value list on the Web, you're going to have to do it on your own. Fortunately, it isn't too hard.

In this article, I'll show you how to build and display these sorts of multi-field value lists on the Web. Along the way, I'm going to spend a fair bit of time talking about writing the HTML code to build a pop-up menu, as well as some basic form-handling techniques.

All the examples and supporting files referred to in this article are available for subscriber download. It might help to grab those and refer to them while you read along.

Pop-up menus on the Web

Before digging into the FileMaker aspects of this issue, you have to be comfortable with the way pop-up menus work in HTML. A pop-up menu is an HTML form element made up of a set of OPTION tag pairs enclosed between open and close SELECT tags. Here's a snippet of HTML for a simple pop-up menu (see figure 2 for an example of how this code would render in a browser):

<select name="fruit">
  <option>Apple</option>
  <option>Banana</option>
  <option>Orange</option>
</select>

The name of the select block is "fruit" and there are three fruit options for users to pick from. Assuming this code is part of an HTML form and submitted with "Banana" selected, the server would receive a name/value pair:

fruit=Banana

Here's a more complex example:

<select name="fruit">
  <option value="1">Apple</option>
  <option value="2">Banana</option>
  <option value="3">Orange</option>
</select>

In this snippet, I've added value attributes to each option tag. When an option tag has a value specified, the value is sent to the server when the form is submitted, rather than the label that displays in the browser. In this case, if a user selects Banana from the pop-up menu and submits the form, the server would receive the following name/value pair:

fruit=2

There are a number of other attributes the SELECT and OPTION tags support, but the only other one you have to worry about is the SELECTED attribute of the OPTION tag. Unless instructed otherwise, a select block automatically selects (and therefore displays) its first option. In both preceding examples, the word "Apple" displays as the selected option when the Web page loads. As you'll see in the PHP examples that follow, there are times when it's desirable to have an option other than the first option selected when the page loads. Here's how:

<select name="fruit">
  <option value="1">Apple</option>
  <option value="2" selected="selected">Banana</option>
  <option value="3">Orange</option>
</select>

Now, when the select block loads in a browser, "Banana" appears as the default option. For more info about select and option tags, please refer to the sidebar about SELECT and OPTION tag syntax.