I recently received the following question:
Figure 1: To review -- Conditional value lists are a snap to build in FileMaker Pro, but ...
Figure 2: Web view -- ... getting conditional value lists to work on the Web is a bit trickier.
"I have a FileMaker Pro database I use to track animals. It has a form that has two pop-up value lists: Habitat and Type. If the Habitat pop-up has the value Land selected, then the values displayed in Type pop-up should include Lion, Tiger, Cheetah. Alternatively, if Habitat pop-up contains the value Sea, I want Shark, Dolphin, Whale to display. My aim is to try and recreate this FileMaker Pro behavior on the Web without using the Submit button to update the options in the Type pop-up."
As you might know, it's pretty easy to do this sort of thing in FileMaker Pro. Because FileMaker maintains a live connection between FileMaker Pro and FileMaker Server, you just select a Habitat and the Type value list options update instantly. Not so on the Web. The connection between your Web browser and the Web server isn't live. (The cool kids call this a "stateless" connection.) So, while you're selecting options in the Habitat pop-up in your browser, the Web server -- and by extension, FileMaker Pro -- doesn't know anything about it.
This statelessness leads to a predicament. The obvious course of action is to have the user submit the page after the first selection. However, that's an unintuitive and clunky thing to inflict on unsuspecting users, especially considering there could be more than two interdependent value lists involved. Select, submit, wait, select, submit wait ... users expect more elegance than that.
Enter JavaScript: A scripting language you can embed in HTML pages to perform actions when certain things occur. For example, you can put some JavaScript in your Web page and set it to execute when a user hovers the mouse pointer over a menu, or when she clicks on the Submit button on a form. When your JavaScript runs, it can do all sorts of things, such as display an alert dialog, open a new browser window, or validate a form.
In this article, I show you two ways to build conditional value lists on the Web using JavaScript. The first example isn't elegant, but works well in most cases. The second is much more sophisticated and extensible but is a little daunting at first. Both examples use the same FileMaker Pro database.
NOTE: I assume for the sake of discussion that you know how to build a conditional value list in FileMaker Pro (figure 1). If you don't, review the AnimalsDB.fp7 file (available for subscriber download).
Value lists reloaded
In this first example, I'll show you how to write some JavaScript that submits the page to the server whenever the user selects a new value in the Habitat pop-up.
Here are the steps the process takes:
- The user loads the page.
- She selects "Sea" from the habitat pop-up.
- JavaScript code automatically submits the form to the server with the selected habitat.
- The server checks the database for Type values related to the Sea habitat.
- The page is reloaded in the browser, but this time with the appropriate Type values filled in.
This entire example is contained in a single file named create_animal.php. Here's the code:
Open a php block and define your database connection information:
<?php
define('FM_HOST', '127.0.0.1');
define('FM_FILE', 'AnimalDB');
define('FM_USER', 'esmith');
define('FM_PASS', 'm4rg0t');
Tip
For security reasons, include the connection info from a file located above the Web directory.