Multiple 2

Overview

This example will display two dual multi-select QuickForm element on the same page.
Each multi-select may have the same layout but here we have choosen to put two different styles.

Screenshot

sample screenshot

Demonstration

Give it a try

Dependencies

This example requires mandatory resources :

Source Code

PHP code
  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.4 2009/01/28 22:24:43 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. // second QF ams element
  98. $form->addElement('header', null, 'Advanced Multiple Select: Live Counter - pool2 style ');
  99.  
  100. $ams2 =& $form->addElement('advmultiselect', 'fruit', null, $fruit_array,
  101.     array('size' => 5, 'class' => 'pool2', 'style' => 'width:300px;')
  102. );
  103. $ams2->setLabel(array('Fruit:', 'Available', 'Selected'));
  104. $ams2->setButtonAttributes('add',      array('name' => 'add2',      'class' => 'inputCommand'));
  105. $ams2->setButtonAttributes('remove',   array('name' => 'remove2',   'class' => 'inputCommand'));
  106. $ams2->setButtonAttributes('all',      array('name' => 'all2',      'class' => 'inputCommand'));
  107. $ams2->setButtonAttributes('none',     array('name' => 'none2',     'class' => 'inputCommand'));
  108. $ams2->setButtonAttributes('toggle',   array('name' => 'toggle2',   'class' => 'inputCommand'));
  109. $ams2->setButtonAttributes('moveup',   array('name' => 'moveup2',   'class' => 'inputCommand'));
  110. $ams2->setButtonAttributes('movedown', array('name' => 'movedown2', 'class' => 'inputCommand'));
  111.  
  112. if (isset($_POST['multiselect2'])) {
  113.     $ams2->setElementTemplate($template2);
  114. } else {
  115.     $ams2->setElementTemplate($template1);
  116. }
  117.  
  118. $buttons[] =& $form->createElement('submit', null, 'Submit');
  119. $buttons[] =& $form->createElement('reset',  null, 'Reset');
  120. $buttons[] =& $form->createElement('checkbox', 'multiselect1', null,
  121.                                    'cars list dual select');
  122. $buttons[] =& $form->createElement('checkbox', 'multiselect2', null,
  123.                                    'fruit list dual select');
  124. $form->addGroup($buttons, null, '&nbsp;');
  125. ?>
  126. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  127.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  128. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  129. <head>
  130. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  131. <title>HTML_QuickForm::advMultiSelect multiple example 2</title>
  132. <style type="text/css">
  133. <!--
  134. body {
  135.   background-color: #FFF;
  136.   font-family: Verdana, Arial, helvetica;
  137.   font-size: 10pt;
  138. }
  139.  
  140. table.pool1, table.pool2 {
  141.   border: 0;
  142.   background-color: #339900;
  143.   width:450px;
  144. }
  145. table.pool2 {
  146.   background-color: #CFC;
  147. }
  148. table.pool1 th, table.pool2 th {
  149.   font-size: 80%;
  150.   font-style: italic;
  151.   text-align: left;
  152. }
  153. table.pool1 td, table.pool2 td {
  154.   vertical-align: top;
  155. }
  156. table.pool1 select, table.pool2 select {
  157.   color: white;
  158.   background-color: #006600;
  159. }
  160.  
  161. .inputCommand {
  162.     background-color: #d0d0d0;
  163.     border: 1px solid white;
  164.     width: 9em;
  165.     margin-bottom: 2px;
  166. }
  167. <?php
  168. if (!isset($_POST['multiselect1'])) {
  169.     echo $ams1->getElementCss();
  170. }
  171. if (!isset($_POST['multiselect2'])) {
  172.     echo $ams2->getElementCss();
  173. }
  174. ?>
  175.  -->
  176. </style>
  177. <?php echo $ams1->getElementJs(false); ?>
  178. </head>
  179. <body>
  180. <?php
  181. if ($form->validate()) {
  182.     $clean = $form->getSubmitValues();
  183.  
  184.     echo '<pre>';
  185.     print_r($clean);
  186.     echo '</pre>';
  187. }
  188. $form->display();
  189. ?>
  190. <script type="text/javascript">
  191. //<![CDATA[
  192. function init() {
  193.     QFAMS.init(['cars','fruit']);
  194. }
  195. window.addEventListener('load', init, false);
  196. //]]>
  197. </script>
  198. </body>
  199. </html>
generated by Generic Syntax Highlighter - GeSHi