PEAR logo

HTML_QuickForm_advmultiselect : The Definitive Guide



Advanced selection usage

Figure 9.3. Advanced selection

Advanced selection

In this example, here are our goals :

  • add buttons (all, none) to select / unselect all options in one stroke.
  • show two differents layout with checkboxes and dual selectboxes.

Example 9.3. How to do a global selection

  1. <?php
  2. /**
  3. * Custom advMultiSelect HTML_QuickForm element
  4. * with extended buttons (select all, select none, toggle selection)
  5. *
  6. * @version    $Id: qfams_custom_7.php,v 1.2 2007/01/05 15:35:33 farell Exp $
  7. * @author     Laurent Laville <pear@laurent-laville.org>
  8. * @package    HTML_QuickForm_advmultiselect
  9. * @subpackage Examples
  10. * @access     public
  11. * @example    examples/qfams_custom_7.php
  12. *             qfams_custom_7 source code
  13. * @link       http://www.laurent-laville.org/img/qfams/screenshot/custom7.png
  14. *             screenshot (Image PNG, 640x525 pixels) 160 Kb
  15. */
  16.  
  17. require_once 'HTML/QuickForm.php';
  18. require_once 'HTML/QuickForm/advmultiselect.php';
  19.  
  20. $form = new HTML_QuickForm('amsCustom7');
  21. $form->removeAttribute('name');        // XHTML compliance
  22.  
  23. $fruit_array = array(
  24.     'apple'     =>  'Apple',
  25.     'orange'    =>  'Orange',
  26.     'pear'      =>  'Pear',
  27.     'banana'    =>  'Banana',
  28.     'cherry'    =>  'Cherry',
  29.     'kiwi'      =>  'Kiwi',
  30.     'lemon'     =>  'Lemon',
  31.     'lime'      =>  'Lime',
  32.     'tangerine' =>  'Tangerine',
  33. );
  34.  
  35.  
  36. // rendering with QF renderer engine and template system
  37. $form->addElement('header', null, 'Advanced Multiple Select: custom layout ');
  38.  
  39. $ams =& $form->addElement('advmultiselect', 'fruit', null, $fruit_array,
  40.                            array('class' => 'pool', 'style' => 'width:200px;')
  41. );
  42. $ams->setLabel(array('Fruit:', 'Available', 'Selected'));
  43.  
  44. $ams->setButtonAttributes('add'     , 'class=inputCommand');
  45. $ams->setButtonAttributes('remove'  , 'class=inputCommand');
  46. $ams->setButtonAttributes('all'     , 'class=inputCommand');
  47. $ams->setButtonAttributes('none'    , 'class=inputCommand');
  48. $ams->setButtonAttributes('toggle'  , 'class=inputCommand');
  49. $ams->setButtonAttributes('moveup'  , 'class=inputCommand');
  50. $ams->setButtonAttributes('movedown', 'class=inputCommand');
  51.  
  52. // template for a single checkboxes multi-select element shape
  53. $template1 = '
  54. <table{class}>
  55. <!-- BEGIN label_3 --><tr><th>{label_3}</th><th>&nbsp;</th></tr><!-- END label_3 -->
  56. <tr>
  57.   <td>{selected}</td>
  58.   <td>{all}<br />{none}<br />{toggle}</td>
  59. </tr>
  60. </table>
  61. ';
  62.  
  63. // template for a dual multi-select element shape
  64. $template2 = '
  65. <table{class}>
  66. <!-- BEGIN label_2 --><tr><th>{label_2}</th><!-- END label_2 -->
  67. <!-- BEGIN label_3 --><th>&nbsp;</th><th>{label_3}</th></tr><!-- END label_3 -->
  68. <tr>
  69.   <td>{unselected}</td>
  70.   <td align="center">
  71.     {add}<br />{remove}<br /><br />{all}<br />{none}<br /><br />{moveup}<br />{movedown}<br />
  72.   </td>
  73.   <td>{selected}</td>
  74. </tr>
  75. </table>
  76. ';
  77.  
  78. if (isset($_POST['multiselect'])) {
  79.     $ams->setElementTemplate($template2);
  80. } else {
  81.     $ams->setElementTemplate($template1);
  82. }
  83.  
  84. if ($_SERVER['REQUEST_METHOD'] == 'GET') {
  85.     // fruit default values already selected without any end-user actions
  86.     $form->setDefaults(array('fruit' => array('kiwi','lime')));
  87.  
  88. } elseif (isset($_POST['fruit'])) {
  89.     // fruit end-user selection
  90.     $form->setDefaults(array('fruit' => $_POST['fruit']));
  91. }
  92.  
  93. $buttons[] =& $form->createElement('submit', null, 'Submit');
  94. $buttons[] =& $form->createElement('reset'null, 'Reset');
  95. $buttons[] =& $form->createElement('checkbox', 'multiselect', null,
  96.                                    'use dual select boxes layout');
  97. $form->addGroup($buttons);
  98. ?>
  99. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  100.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  101. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  102. <head>
  103. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  104. <title>HTML_QuickForm::advMultiSelect custom example 7</title>
  105. <style type="text/css">
  106. <!--
  107. body {
  108.   background-color: #FFF;
  109.   font-family: Verdana, Arial, helvetica;
  110.   font-size: 10pt;
  111. }
  112.  
  113. table.pool {
  114.   border: 0;
  115.   background-color: cyan;
  116. }
  117. table.pool td {
  118.   padding-left: 1em;
  119. }
  120. table.pool th {
  121.   font-size: 80%;
  122.   font-style: italic;
  123.   text-align: center;
  124. }
  125. table.pool select {
  126.   color: gray;
  127.   background-color: #eee;
  128. }
  129.  
  130. .inputCommand {
  131.   width: 120px;
  132. }
  133. <?php
  134. if (!isset($_POST['multiselect'])) {
  135.     echo $ams->getElementCss();
  136. }
  137. ?>
  138.  -->
  139. </style>
  140. <?php echo $ams->getElementJs(false); ?>
  141. </head>
  142. <body>
  143. <?php
  144. if ($form->validate()) {
  145.     $clean = $form->getSubmitValues();
  146.  
  147.     echo '<pre>';
  148.     print_r($clean);
  149.     echo '</pre>';
  150. }
  151. $form->display();
  152. ?>
  153. </body>
  154. </html>
HTML_QuickForm_advmultiselect : The Definitive Guide v 1.4.0 : 9 Juin 2007