PEAR logo

HTML_QuickForm_advmultiselect : The Definitive Guide

Live counter combines with multiple elements
Prev  Chapter 9. Examples  


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
Prev  Up  
Template engine usage   Home