Custom 4

Overview

This example will display either a dual or single multi-select QuickForm element, to manage a simple fruit list.
This example show how to solve problem when javascript is unavailable (disabled, or browser not compliant). The single multi-select layout (with checkboxes) does not requires javascript to run.

Tip: to use a such presentation (single multi-select with checkboxes), you only need to remove {unselected} placeholder in the template.

Screenshot

sample screenshot

Demonstration

Give it a try

Dependencies

This example requires mandatory resources :

Explains step by step

Step 1

The dual multi-select is created (lines 57-59) with no headers yet defined, and load with data defined from $fruit_array (lines 40 thru 50).

The available fruit list has pear item disabled to forbid its selection (lines 29;43), and items lemon, tangerine with fancy attributes (lines 30-38;47;49).

Step 2

To present and manage two layouts, we need two different templates:
- Alternative template is set on lines 63-73, for a dual multi-select element shape.
- Main template is set on lines 76-84, for a single checkboxes multi-select element shape.

Template is set accordingly to user-choice (see checkbox near buttons), on lines 96-100.

Step 3

Depending of template used (single or dual multi-select), we will set (line 134) or not the additional CSS rules with fancy attributes (lines 136-155) and javascript (line 163).

On dual multi-select, both list are 100 pixels width and display 10 items (default attributes). Styles are defined by CSS rules and class pool (lines 122-130).

Property Value Default
size   10
width   100
class pool  

On dual multi-select, the swap buttons used default values.

Property Value Default
name   add
value    >> 
type   button

Property Value Default
name   remove
value    << 
type   button

Source Code

PHP code
  1. <?php
  2. /**
  3.  * Custom advMultiSelect HTML_QuickForm element
  4.  * that present alternatively a dual multsi-select
  5.  * or a single checkboxes with fancy attributes.
  6.  *
  7.  * @version    $Id: qfams_custom_4.php,v 1.8 2009/01/29 09:41:19 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_custom_4.php
  13.  *             qfams_custom_4 source code
  14.  * @link       http://www.laurent-laville.org/img/qfams/screenshot/custom4.png
  15.  *             screenshot (Image PNG, 419x317 pixels) 6.02 Kb
  16.  */
  17.  
  18. require_once 'HTML/QuickForm.php';
  19. require_once 'HTML/QuickForm/advmultiselect.php';
  20.  
  21. $form = new HTML_QuickForm('amsCustom4');
  22. $form->removeAttribute('name');        // XHTML compliance
  23.  
  24. $fruit_styles = array(
  25.     'class' => 'icons',
  26.     'onmouseover' => "this.className='over'",
  27.     'onmouseout'  => "this.className='icons'"
  28. );
  29. $pear  = array_merge($fruit_styles, array('disabled' => 'disabled'));
  30. $lemon = array_merge($fruit_styles,
  31.                      array('class' => 'goldstar',
  32.                            'onmouseout'  => "this.className='goldstar'"
  33. ));
  34. $tangerine = array_merge($fruit_styles,
  35.                          array('class' => 'bluestar',
  36.                                'onmouseout'  => "this.className='bluestar'",
  37.                                'style' => 'color:red;')
  38. );
  39.  
  40. $fruit_array = array(
  41.     'apple'     =>  'Apple',
  42.     'orange'    =>  'Orange',
  43.     'pear'      =>  array('Pear', $pear),
  44.     'banana'    =>  'Banana',
  45.     'cherry'    =>  'Cherry',
  46.     'kiwi'      =>  'Kiwi',
  47.     'lemon'     =>  array('Lemon', $lemon),
  48.     'lime'      =>  'Lime',
  49.     'tangerine' =>  array('Tangerine', $tangerine),
  50. );
  51.  
  52. // rendering with QF renderer engine and template system
  53. $form->addElement('header', null, 'Advanced Multiple Select: custom layout ');
  54.  
  55. $form->addElement('text', 'name', 'Name:', array('size' => 40, 'maxlength' => 80));
  56.  
  57. $ams =& $form->addElement('advmultiselect', 'fruit', null, $fruit_array,
  58.                            array('class' => 'pool')
  59. );
  60. $ams->setLabel(array('Fruit:', 'Available', 'Selected'));
  61.  
  62. // template for a dual multi-select element shape
  63. $template2 = '
  64. <table{class}>
  65. <!-- BEGIN label_2 --><tr><th>{label_2}</th><!-- END label_2 -->
  66. <!-- BEGIN label_3 --><th>&nbsp;</th><th>{label_3}</th></tr><!-- END label_3 -->
  67. <tr>
  68.  <td>{unselected}</td>
  69.  <td align="center">{add}{remove}</td>
  70.  <td>{selected}</td>
  71. </tr>
  72. </table>
  73. ';
  74.  
  75. // template for a single checkboxes multi-select element shape
  76. $template1 = '
  77. <table{class}>
  78. <!-- BEGIN label_3 --><tr><th>{label_3}</th></tr><!-- END label_3 -->
  79. <tr>
  80.  <td>{selected}</td>
  81. </tr>
  82. </table>
  83. ';
  84.  
  85. if (isset($_POST['multiselect'])) {
  86.     $ams->setElementTemplate($template2);
  87. } else {
  88.     $ams->setElementTemplate($template1);
  89. }
  90.  
  91. if ($_SERVER['REQUEST_METHOD'] == 'GET') {
  92.     // fruit default values already selected without any end-user actions
  93.     $form->setDefaults(array('fruit' => array('kiwi','lime')));
  94. }
  95.  
  96. $buttons[] =& $form->createElement('submit', null, 'Submit');
  97. $buttons[] =& $form->createElement('reset', null, 'Reset');
  98. $buttons[] =& $form->createElement('checkbox', 'multiselect', null,
  99.                                    'use dual select boxes layout');
  100. $form->addGroup($buttons, null, '&nbsp;');
  101.  
  102. $form->addRule('name', 'Your name is required', 'required');
  103. $form->addGroupRule('fruit', 'At least one fruit is required', 'required', null, 1);
  104.  
  105. $form->applyFilter('__ALL__', 'trim');
  106. $form->applyFilter('__ALL__', 'strip_tags');
  107. ?>
  108. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  109.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  110. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  111. <head>
  112. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  113. <title>HTML_QuickForm::advMultiSelect custom example 4</title>
  114. <style type="text/css">
  115. <!--
  116. body {
  117.   background-color: #FFF;
  118.   font-family: Verdana, Arial, helvetica;
  119.   font-size: 10pt;
  120. }
  121.  
  122. table.pool {
  123.   border: 0;
  124.   background-color: lightyellow;
  125. }
  126. table.pool th {
  127.   font-size: 80%;
  128.   font-style: italic;
  129.   text-align: center;
  130. }
  131.  
  132. <?php
  133. if (!isset($_POST['multiselect'])) {
  134.     echo $ams->getElementCss();
  135.  
  136.     echo '
  137. label input {
  138.  margin-right: 16px;
  139. }
  140. label.bluestar, label.goldstar {
  141.  background-repeat: no-repeat;
  142.  background-position: 20px center;
  143. }
  144. label.bluestar{
  145.  background-image: url(bluestar-12.gif) ;
  146. }
  147. label.goldstar {
  148.  background-image: url(goldstar-12.gif) ;
  149. }
  150.  
  151. label.over {
  152.  background-color: #0a246a;
  153.  color: #fff;
  154. }
  155. ';
  156. }
  157. ?>
  158.  
  159.  -->
  160. </style>
  161. <?php
  162. if (isset($_POST['multiselect'])) {
  163.     echo $ams->getElementJs(false);
  164. }
  165. ?>
  166. </head>
  167. <body>
  168. <?php
  169. if ($form->validate()) {
  170.     $clean = $form->getSubmitValues();
  171.  
  172.     echo '<pre>';
  173.     print_r($clean);
  174.     echo '</pre>';
  175.  
  176.     printf("<p>Welcome <b>%s</b> you've selected these fruits:</p>",
  177.            $clean['name']);
  178.     echo '<p>' . implode(', ', $clean['fruit']) . '</p>';
  179. }
  180. $form->display();
  181. ?>
  182. </body>
  183. </html>
generated by Generic Syntax Highlighter - GeSHi