![]() HTML_QuickForm_advmultiselect : The Definitive Guide
|
We will start by creating a very simple form. Our goals are :
Copy the following code to a file, give it a .php extension, and display it in your browser:
<?php /** * Custom advMultiSelect HTML_QuickForm element * using stylesheet rules selectors and a template. * * The template allows to add label as headers of dual select box * and moves the button to another location (below each select box). * * @version $Id: ch04.html,v 1.2 2005/11/30 20:28:28 farell Exp $ * @author Laurent Laville <pear@laurent-laville.org> * @package HTML_QuickForm_advmultiselect * @subpackage Examples * @access public */ require_once 'HTML/QuickForm.php'; require_once 'HTML/QuickForm/advmultiselect.php'; $form = new HTML_QuickForm('amsCustom1');$form->removeAttribute('name'); // XHTML compliance $fruit_array
= array( 'apple' => 'Apple', 'orange' => 'Orange', 'pear' => 'Pear', 'banana' => 'Banana', 'cherry' => 'Cherry', 'kiwi' => 'Kiwi', 'lemon' => 'Lemon', 'lime' => 'Lime', 'tangerine' => 'Tangerine', ); // rendering with QF renderer engine and template system $form->addElement('header', null, 'Advanced Multiple Select: custom layout ');
$ams =& $form->addElement('advmultiselect', 'fruit', null, $fruit_array
, array('size' => 5, 'class' => 'pool', 'style' => 'width:300px;' )
);
$ams->setLabel(array('Fruit:', 'Available', 'Selected'));
$ams->setButtonAttributes('add'
, array('value' => 'Add >>', 'class' => 'inputCommand' )); $ams->setButtonAttributes('remove'
, array('value' => '<< Remove', 'class' => 'inputCommand' )); $template = ' <table{class}> <!-- BEGIN label_2 --><tr><th align="center">{label_2}</th><!-- END label_2 -->
<!-- BEGIN label_3 --><th align="center">{label_3}</th></tr><!-- END label_3 -->
<tr> <td>{unselected}</td> <td>{selected}</td> </tr> <tr> <td align="center">{add}</td>
<td align="center">{remove}</td>
</tr> </table>'; $ams->setElementTemplate($template); if (isset($_POST['fruit'])) { $form->setDefaults(array('fruit' => $_POST['fruit']));
} $form->addElement('submit', 'send', 'Send');
?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>HTML_QuickForm::advMultiSelect custom example 1</title> <style type="text/css"> <!-- body { background-color: #FFF; font-family: Verdana, Arial, helvetica; font-size: 10pt; } table.pool { border: 0; background-color: lightyellow; } table.pool th { font-size: 80%; font-style: italic; text-align: center; } table.pool select { background-color: lightblue; } .inputCommand { background-color: #d0d0d0; border: 1px solid #7B7B88; width: 7em; margin-bottom: 2px; } // --> </style> <?php echo $ams->getElementJs(false); ?>
</head> <body> <?php if ($form->validate()) {
$clean = $form->getSubmitValues();
echo '<pre>'; print_r($clean); echo '</pre>'; } $form->display();
?> </body> </html>
Loading this file in your browser will simply show something like this screenshot.
Lets review this example step by step :
![]() |
At the beginning we creates a HTML_QuickForm object that will contain the objects representing elements and all the other necessary information. We only pass the form's name to the constructor, which means that default values will be used for other parameters. |
|||
![]() ![]() ![]() |
Our form will consist of three elements: The first one is not the “real” element, it is just a heading to improve presentation. The second one is our advmultiselect element. Note that parameters for
|
|||
![]() |
The |
|||
![]() |
It's time to define the fruit element attributes:
|
|||
![]() ![]() ![]() |
To put headers on each list (wherever you want: at top, or bottom), you need first to set these values. Then second, defines the placeholder in the template (as any other multi-label element).
|
|||
![]() ![]() |
Last step to complete definition of a advmultiselect element is to set the add and remove buttons. Here we gave names
|
|||
![]() |
User's input overrides default values of the fruit advmultiselect element. |
|||
![]() |
Before to validate and process the form, the building form step need one more thing. Don't forget, that to manage swaps between both list, we need some javascript code. It's now time to include into our HTML stream/template.
|
|||
![]() |
We have now the form built and need to decide whether to process it or display. | |||
![]() |
This is a simple display example. In your scripts you'll usually want to store the values somewhere or do whatever else. The HTML_QuickForm::process() method may be of interest here. |
|||
![]() |
The last line is pretty easy. If the form is not valid, which means that it either was not yet submitted or that there were errors, it will be displayed. |
HTML_QuickForm_advmultiselect : The Definitive Guide | v 1.1.0 : December 1, 2005 |