PEAR logo

HTML_QuickForm_advmultiselect : The Definitive Guide



Live counter combines with multiple elements

Figure 9.7. Live counter on two advmultiselect elements

Live counter on two advmultiselect elements

In this example, here are our goals :

  • use two advmultiselect elements on the same page.
  • show two differents layout with checkboxes and dual selectboxes.
  • show two differents display of live counters with single and dual select boxes.

Example 9.7. Multiple live counters on same page

  1. <?php
  2. /**
  3. * Two advMultiSelect HTML_QuickForm elements with all properties
  4. * that can be display in one or two select box mode.
  5. * This example demonstrate the new feature of version 1.3.0 : Live Counter
  6. *
  7. * @version    $Id: qfams_multiple_2.php,v 1.1 2007/01/05 16:57:49 farell Exp $
  8. * @author     Laurent Laville <pear@laurent-laville.org>
  9. * @package    HTML_QuickForm_advmultiselect
  10. * @subpackage Examples
  11. * @access     public
  12. * @example    examples/qfams_multiple_2.php
  13. *             qfams_multiple_2 source code
  14. * @link       http://www.laurent-laville.org/img/qfams/screenshot/multiple2.png
  15. *             screenshot (Image PNG, 595x511 pixels) 11.9 Kb
  16. */
  17.  
  18. require_once 'HTML/QuickForm.php';
  19. require_once 'HTML/QuickForm/advmultiselect.php';
  20.  
  21. $form = new HTML_QuickForm('amsMultiple2');
  22. $form->removeAttribute('name');        // XHTML compliance
  23.  
  24. $fruit_array = array(
  25.     'apple'     =>  'Apple',
  26.     'orange'    =>  'Orange',
  27.     'pear'      =>  'Pear',
  28.     'banana'    =>  'Banana',
  29.     'cherry'    =>  'Cherry',
  30.     'kiwi'      =>  'Kiwi',
  31.     'lemon'     =>  'Lemon',
  32.     'lime'      =>  'Lime',
  33.     'tangerine' =>  'Tangerine',
  34. );
  35.  
  36. $car_array = array(
  37.     'dodge'     =>  'Dodge',
  38.     'chevy'     =>  'Chevy',
  39.     'bmw'       =>  'BMW',
  40.     'audi'      =>  'Audi',
  41.     'porsche'   =>  'Porsche',
  42.     'kia'       =>  'Kia',
  43.     'subaru'    =>  'Subaru',
  44.     'mazda'     =>  'Mazda',
  45.     'isuzu'     =>  'Isuzu',
  46. );
  47.  
  48. // template for a single checkboxes multi-select element shape with live counter
  49. $template1 = '
  50. <table{class}>
  51. <!-- BEGIN label_3 --><tr><th>{label_3}(<span id="{selected_count_id}">{selected_count}</span>)</th><th>&nbsp;</th></tr><!-- END label_3 -->
  52. <tr>
  53.   <td>{selected}</td>
  54.   <td>{all}<br />{none}<br />{toggle}</td>
  55. </tr>
  56. </table>
  57. ';
  58.  
  59. // template for a dual multi-select element shape with live counter
  60. $template2 = '
  61. <table{class}>
  62. <!-- BEGIN label_2 --><tr><th>{label_2}(<span id="{unselected_count_id}">{unselected_count}</span>)</th><!-- END label_2 -->
  63. <!-- BEGIN label_3 --><th>&nbsp;</th><th>{label_3}(<span id="{selected_count_id}">{selected_count}</span>)</th></tr><!-- END label_3 -->
  64. <tr>
  65.   <td>{unselected}</td>
  66.   <td align="center">
  67.     {add}<br />{remove}<br /><br />{all}<br />{none}<br />{toggle}<br /><br />{moveup}<br />{movedown}<br />
  68.   </td>
  69.   <td>{selected}</td>
  70. </tr>
  71. </table>
  72. ';
  73.  
  74. $defaults = array();
  75.  
  76. // first QF ams element
  77. $form->addElement('header', null, 'Advanced Multiple Select: Live Counter - pool1 style ');
  78.  
  79. $ams1 =& $form->addElement('advmultiselect', 'cars', null, $car_array,
  80.     array('size' => 10, 'class' => 'pool1', 'style' => 'width:200px;')
  81. );
  82. $ams1->setLabel(array('Cars:', 'Available', 'Selected'));
  83. $ams1->setButtonAttributes('add',      array('name' => 'add1',      'class' => 'inputCommand'));
  84. $ams1->setButtonAttributes('remove',   array('name' => 'remove1',   'class' => 'inputCommand'));
  85. $ams1->setButtonAttributes('all',      array('name' => 'all1',      'class' => 'inputCommand'));
  86. $ams1->setButtonAttributes('none',     array('name' => 'none1',     'class' => 'inputCommand'));
  87. $ams1->setButtonAttributes('toggle',   array('name' => 'toggle1',   'class' => 'inputCommand'));
  88. $ams1->setButtonAttributes('moveup',   array('name' => 'moveup1',   'class' => 'inputCommand'));
  89. $ams1->setButtonAttributes('movedown', array('name' => 'movedown1', 'class' => 'inputCommand'));
  90.  
  91. if (isset($_POST['multiselect1'])) {
  92.     $ams1->setElementTemplate($template2);
  93. } else {
  94.     $ams1->setElementTemplate($template1);
  95. }
  96.  
  97. if (isset($_POST['cars'])) {
  98.     $defaults = array('cars' => $_POST['cars']);
  99. }
  100.  
  101. // second QF ams element
  102. $form->addElement('header', null, 'Advanced Multiple Select: Live Counter - pool2 style ');
  103.  
  104. $ams2 =& $form->addElement('advmultiselect', 'fruit', null, $fruit_array,
  105.     array('size' => 5, 'class' => 'pool2', 'style' => 'width:300px;')
  106. );
  107. $ams2->setLabel(array('Fruit:', 'Available', 'Selected'));
  108. $ams2->setButtonAttributes('add',      array('name' => 'add2',      'class' => 'inputCommand'));
  109. $ams2->setButtonAttributes('remove',   array('name' => 'remove2',   'class' => 'inputCommand'));
  110. $ams2->setButtonAttributes('all',      array('name' => 'all2',      'class' => 'inputCommand'));
  111. $ams2->setButtonAttributes('none',     array('name' => 'none2',     'class' => 'inputCommand'));
  112. $ams2->setButtonAttributes('toggle',   array('name' => 'toggle2',   'class' => 'inputCommand'));
  113. $ams2->setButtonAttributes('moveup',   array('name' => 'moveup2',   'class' => 'inputCommand'));
  114. $ams2->setButtonAttributes('movedown', array('name' => 'movedown2', 'class' => 'inputCommand'));
  115.  
  116. if (isset($_POST['multiselect2'])) {
  117.     $ams2->setElementTemplate($template2);
  118. } else {
  119.     $ams2->setElementTemplate($template1);
  120. }
  121.  
  122. if (isset($_POST['fruit'])) {
  123.     $defaults = array_merge($defaults, array('fruit' => $_POST['fruit']));
  124. }
  125.  
  126. $buttons[] =& $form->createElement('submit', null, 'Submit');
  127. $buttons[] =& $form->createElement('reset'null, 'Reset');
  128. $buttons[] =& $form->createElement('checkbox', 'multiselect1', null,
  129.                                    'cars list dual select');
  130. $buttons[] =& $form->createElement('checkbox', 'multiselect2', null,
  131.                                    'fruit list dual select');
  132. $form->addGroup($buttons);
  133.  
  134. if (count($defaults) > 0) {
  135.     $form->setDefaults($defaults);
  136. }
  137. ?>
  138. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  139.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  140. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  141. <head>
  142. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  143. <title>HTML_QuickForm::advMultiSelect multiple example 2</title>
  144. <style type="text/css">
  145. <!--
  146. body {
  147.   background-color: #FFF;
  148.   font-family: Verdana, Arial, helvetica;
  149.   font-size: 10pt;
  150. }
  151.  
  152. table.pool1, table.pool2 {
  153.   border: 0;
  154.   background-color: #339900;
  155.   width:450px;
  156. }
  157. table.pool2 {
  158.   background-color: #CFC;
  159. }
  160. table.pool1 th, table.pool2 th {
  161.   font-size: 80%;
  162.   font-style: italic;
  163.   text-align: left;
  164. }
  165. table.pool1 td, table.pool2 td {
  166.   vertical-align: top;
  167. }
  168. table.pool1 select, table.pool2 select {
  169.   color: white;
  170.   background-color: #006600;
  171. }
  172.  
  173. .inputCommand {
  174.     background-color: #d0d0d0;
  175.     border: 1px solid white;
  176.     width: 9em;
  177.     margin-bottom: 2px;
  178. }
  179. <?php
  180. if (!isset($_POST['multiselect1'])) {
  181.     echo $ams1->getElementCss();
  182. }
  183. if (!isset($_POST['multiselect2'])) {
  184.     echo $ams2->getElementCss();
  185. }
  186. ?>
  187.  -->
  188. </style>
  189. <script type="text/javascript" src="qfamsHandler.js"></script>
  190. <script type="text/javascript">
  191. <!--
  192. window.qfamsName = new Array();
  193. window.qfamsName[0] = 'cars';
  194. window.qfamsName[1] = 'fruit';
  195. window.addEventListener('load', qfamsInit, false);
  196. //-->
  197. </script>
  198. </head>
  199. <body>
  200. <?php
  201. if ($form->validate()) {
  202.     $clean = $form->getSubmitValues();
  203.  
  204.     echo '<pre>';
  205.     print_r($clean);
  206.     echo '</pre>';
  207. }
  208. $form->display();
  209. ?>
  210. </body>
  211. </html>
HTML_QuickForm_advmultiselect : The Definitive Guide v 1.4.0 : 9 Juin 2007