Using HTML_QuickForm To Manage Web Forms, Part 2 - Hierarchical Drop Downs in Web Forms
(Page 2 of 7 )
Consider this: I need my Web form (from the first article) to display two drop downs - one containing "Artist Type" and the second, the "Artist Sub-type". However, the options displayed in the second drop down have to be dynamically updated depending on the value selected in the first.
Normally, I resort to complex client-side scripting to implement such requirements. Not any more because the HTML_QuickForm comes with a custom "hierselect" control that does all this behind-the-scene jugglery for me.
Not convinced? Take a look at the following code listing:
Code Listing 1
Save this script and load it in the browser:
Now, select a different option from the first "Artist Type" drop down to see the options of the second drop down update automatically:
Now, review the following code segment:
<?php
require_once 'HTML/QuickForm.php';
// snip
// snip - some fields have been removed in order to avoid repetition
// define artist types
$ary_artist_type[0] = 'Solo';
$ary_artist_type[1] = 'Group';
// define artist sub-types
$ary_artist_sub_type[0][1] = 'Male';
$ary_artist_sub_type[0][2] = 'Female';
$ary_artist_sub_type[1][3] = 'Males Only';
$ary_artist_sub_type[1][4] = 'Females Only';
$ary_artist_sub_type[1][5] = 'Male and Female';
$obj_hdd_artist_type = &$obj_registration_form->addElement('hierselect', 'ddlArtistType', 'Select Artist Type:', '', '<br />');
// set option arrays for "Artist Type" hierarchical <SELECT> drop down
$obj_hdd_artist_type->setOptions(array($ary_artist_type, $ary_artist_sub_type));
// snip
?>
After importing the required PEAR class files, I have created a local instance of the HTML_QuickForm() object. Then, I fall back on the resourceful addElement() method to insert the different <FORM> elements.
However, before I can add my new "hierarchical" drop down control, some groundwork has to be done: the definition of two arrays - "$ary_artist_type" containing the options for the "Artist Type" drop down and "$ary_artist_sub_type" for the "Artist Sub-type" drop down.
Next, I invoke the addElement() method, passing the "hierselect" keyword as an input parameter. This instructs the HTML_QuickForm() object to create an instance of the HTML_QuickForm_hierselect() object - responsible for the rendering of hierarchical drop downs in the output. Lastly, I have used the setOptions() method to populate the options of the two drop downs.
Note that if I wish to render a three level hierarchy, I’ll have to define three arrays and so on.
Next, I have added an "advanced checkbox" control. By default, a Web form does not post any value if a checkbox element is not "checked." The onus of taking a decision, of whether checkbox is "checked" or not, lies with the programmer. Not so, if I use the "advanced checkbox" control - this custom control will always post a value. Take a look at the next code fragment:
<?php
// snip
$obj_registration_form->addElement('advcheckbox', 'chkNewsletter', 'Subscribe to Newsletter:', 'Yes', null, array('No', 'Yes'));
// snip
?>
The "advcheckbox" keyword instructs the HTML_QuickForm() object to render an "advanced checkbox" control. The values to be POSTed are passed in the form of an array - the first is passed when the box is not "checked" and the second, when the box is "checked."
Finally, I’d like you to take another look at an upated version of the "date" control:
<?php
// snip
$obj_registration_form->addElement('date', 'txtDateOfBirth', 'Date of Birth:', array('format' => 'dFY', 'addEmptyOption' => 'true', 'emptyOptionValue' => '', 'emptyOptionText' => 'Select'));
// snip
?>
Here, I would like to highlight the use of the "format" attribute - as the name suggests, this allows me to specify the format for the "date" control. The string "dFY" is consistent with the format string used with the date() PHP function. For more "format specifiers," please review the HTML_QuickForm documentation.
For the same control, I have listed three additional attributes: "addEmptyOption" informs the renderer to add an empty <OPTION> at the beginning of the drop down, "emptyOptionValue" allows me to specify the value for this <OPTION> (I’ve set this to a blank string) and the "emptyOption" attribute contains the text that is displayed (I’ve set this to "Select").
In the next section, I’ll show you how to render "auto-complete" text boxes - a common feature in most PC-based applications, but a challenge to implement for browser-based ones.
Next: Auto-complete Text Boxes >>
More Design Usability Articles
More By Harish Kamath
