Multiple 1

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 :

Explains step by step

Step 1

The dual multi-select that will manage the car list is created (line 67), with no headers, and set with data defined from $car_array (lines 52 thru 62).

The dual multi-select that will manage the fruit list is created (lines 73-77), with headers defined line 79, and load with data defined from $fruit_array (lines 40 thru 50).

Step 2

Even if both list used the default template (lines 68;86), while cars list used all defaut options, we will ask fruit list to display only 5 items with a green layout color (lines 74-76 and lines 104-117):

Property Value Default
size 5 10
width 200 100
class pool  

Step 3

The swap buttons of fruit list have styles managed by CSS rule inputCommand (lines 81;84) defined on lines 119-124 while labels are changed on lines 80;83.

Property Value Default
name add1 add
value Add  >> 
type   button
class inputCommand  

Property Value Default
name remove1remove
value Remove  << 
type   button
class inputCommand  

Source Code

PHP code
  1. <?php
  2. /**
  3.  * Mixed advMultiSelect HTML_QuickForm elements.
  4.  * Two widgets on the same page/form with one javascript code instance
  5.  *
  6.  * @version    $Id: qfams_multiple_1.php,v 1.7 2009/01/29 11:11:51 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_multiple_1.php
  12.  *             qfams_multiple_1 source code
  13.  * @link       http://www.laurent-laville.org/img/qfams/screenshot/multiple1.png
  14.  *             screenshot (Image PNG, 566x392 pixels) 8.82 Kb
  15.  */
  16.  
  17. require_once 'HTML/QuickForm.php';
  18. require_once 'HTML/QuickForm/advmultiselect.php';
  19.  
  20. $form = new HTML_QuickForm('amsMultiple1');
  21. $form->removeAttribute('name');        // XHTML compliance
  22.  
  23. // same as default element template but wihtout the label (in first td cell)
  24. $withoutLabel = <<<_HTML
  25. <tr valign="top">
  26.     <td align="right">
  27.         &nbsp;
  28.     </td>
  29.     <td align="left">
  30.         <!-- BEGIN error --><span style="color: #ff0000;">{error}</span><br /><!-- END error -->{element}
  31.     </td>
  32. </tr>
  33. _HTML;
  34.  
  35. // more XHTML compliant
  36. // replace default element template with label, because submit button have no label
  37. $renderer =& $form->defaultRenderer();
  38. $renderer->setElementTemplate($withoutLabel, 'send');
  39.  
  40. $fruit_array = array(
  41.     'apple'     =>  'Apple',
  42.     'orange'    =>  'Orange',
  43.     'pear'      =>  'Pear',
  44.     'banana'    =>  'Banana',
  45.     'cherry'    =>  'Cherry',
  46.     'kiwi'      =>  'Kiwi',
  47.     'lemon'     =>  'Lemon',
  48.     'lime'      =>  'Lime',
  49.     'tangerine' =>  'Tangerine',
  50. );
  51.  
  52. $car_array = array(
  53.     'dodge'     =>  'Dodge',
  54.     'chevy'     =>  'Chevy',
  55.     'bmw'       =>  'BMW',
  56.     'audi'      =>  'Audi',
  57.     'porsche'   =>  'Porsche',
  58.     'kia'       =>  'Kia',
  59.     'subaru'    =>  'Subaru',
  60.     'mazda'     =>  'Mazda',
  61.     'isuzu'     =>  'Isuzu',
  62. );
  63.  
  64. // rendering with all default options
  65. $form->addElement('header', null, 'Advanced Multiple Select: default layout ');
  66.  
  67. $ams1 =& $form->addElement('advmultiselect', 'cars', 'Cars:', $car_array);
  68. $ams1->setElementTemplate(null, false);
  69.  
  70. // rendering with css selectors and API selLabel(), setButtonAttributes()
  71. $form->addElement('header', null, 'Advanced Multiple Select: custom layout ');
  72.  
  73. $ams2 =& $form->addElement('advmultiselect', 'fruit', null, $fruit_array,
  74.                            array('size' => 5,
  75.                                  'class' => 'pool', 'style' => 'width:200px;'
  76.                                 )
  77. );
  78.  
  79. $ams2->setLabel(array('Fruit:', 'Available', 'Selected'));
  80. $ams2->setButtonAttributes('add',    array('value' => 'Add', 'name' => 'add1',
  81.                                            'class' => 'inputCommand'
  82. ));
  83. $ams2->setButtonAttributes('remove', array('value' => 'Remove', 'name' => 'remove1',
  84.                                            'class' => 'inputCommand'
  85. ));
  86. $ams2->setElementTemplate(null, false);
  87.  
  88. $form->addElement('submit', 'send', 'Send');
  89. ?>
  90. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  91.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  92. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  93. <head>
  94. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  95. <title>HTML_QuickForm::advMultiSelect multiple example 1</title>
  96. <style type="text/css">
  97. <!--
  98. body {
  99.   background-color: #FFF;
  100.   font-family: Verdana, Arial, helvetica;
  101.   font-size: 10pt;
  102. }
  103.  
  104. table.pool {
  105.   border: 0;
  106.   background-color: #339900;
  107.   width:450px;
  108. }
  109. table.pool th {
  110.   font-size: 80%;
  111.   font-style: italic;
  112.   text-align: left;
  113. }
  114. table.pool select {
  115.   color: white;
  116.   background-color: #006600;
  117. }
  118.  
  119. .inputCommand {
  120.     background-color: #d0d0d0;
  121.     border: 1px solid #7B7B88;
  122.     width: 7em;
  123.     margin-bottom: 2px;
  124. }
  125.  -->
  126. </style>
  127. <?php
  128. echo $ams1->getElementJs(false, true);
  129. ?>
  130. </head>
  131. <body>
  132. <?php
  133. if ($form->validate()) {
  134.     $clean = $form->getSubmitValues();
  135.  
  136.     echo '<pre>';
  137.     print_r($clean);
  138.     echo '</pre>';
  139. }
  140. $form->display();
  141. ?>
  142. </body>
  143. </html>
generated by Generic Syntax Highlighter - GeSHi