Titan Fusion

Alexandar Tzanov's Personal Blog

Function: popupMutableMenu


The popupMutableMenu PHP function, is similar to the popupMenu function, with the exception that it will allow the user to enter their own value. The popup menu will be generated from a text file. If the file cannot be read or found the function will return a regular text field. The purpose of this function is to generate a menu with a long list of options. Another benefit of this function is to reuse it in different views, but to only have to maintain the list of item in one place – the text file.

The menu is generated with an additional option “Other”. If a user select the Other option a free form text field will be displayed beneath the popup menu. The option will be added to the menu as the user types.

When the menu is generated a custom value option will be added to the list if a value string is provided but the string is not found in the menu list file. This is useful in situation when the user is returned to the page with a pre-populated form data, e.g. during validation, or editing.

Source Code

  1. /* popupMutableMenu
  2.  * Developer: Alexandar Tzanov
  3.  * Revised: 2013-08-29
  4.  * Version: 1.0
  5.  */
  6.  
  7. function popupMutableMenu($fileName = '', $relevantPath = '', $value = '', $name = '', $id = 'popupMenu', $size = 40)
  8. {
  9.     // Get working directory path.
  10.     $workDir = getcwd();
  11.     $dataFile = "$workDir/$relevantPath/$fileName";
  12.  
  13.     // Make sure the file exist, then read it.
  14.     if (!empty($fileName) && file_exists($dataFile))
  15.     {
  16.         $fileData = file($dataFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
  17.  
  18.         // JavaScript controlls for the Other text field and menu option.
  19.         $otherControlls = '<script>// Add blank option and text field
  20.             function showOtherField(selectedOption)
  21.             {
  22.                 var otherFieldPlaceholder = document.getElementById("popupMenuOtherFieldPlaceholder");
  23.                 var popupMenu = document.getElementById("' . $id . '");
  24.  
  25.                 // Add new text field and option to popup menu.
  26.                 if (selectedOption.value === "Other")
  27.                 {
  28.                     var otherNew = document.createElement("option");
  29.                     otherNew.text = "";
  30.                     otherNew.id = "otherNew";
  31.                     popupMenu.add(otherNew, null);
  32.                     otherFieldPlaceholder.innerHTML = \'<input type="text" id="popupMenuOtherField" size="' . $size . '" onkeyup="updatePopupMenuOption(this);">\';
  33.                 }
  34.                 else
  35.                 {
  36.                     // Hide other field.
  37.                     otherFieldPlaceholder.innerHTML = "";
  38.                     var otherNew = document.getElementById("otherNew");
  39.                     if (otherNew) popupMenu.removeChild(otherNew);
  40.                 }
  41.             }
  42.             // Update new option with user input
  43.             function updatePopupMenuOption(userEntry)
  44.             {
  45.                 var newOption = document.getElementById("otherNew");
  46.                 newOption.selected = true;
  47.                 newOption.value = userEntry.value;
  48.                 newOption.text = userEntry.value;
  49.             }
  50.             </script>';
  51.  
  52.         // Popup menu
  53.         $popupMenu = $otherControlls;
  54.         $popupMenu .= "<select name=\"$name\" id=\"$id\" onchange=\"showOtherField(this);\">\n<option></option>\n";
  55.  
  56.         $optionSelectionMatch = false;  // Selected option variables.
  57.  
  58.         // Loop through file data array and build string.
  59.         foreach ($fileData as $menuItem)
  60.         {
  61.             // Check if the preset values matches an item on the list.
  62.             if ($value == trim($menuItem))
  63.             {
  64.                 $menuItemSelected = 'selected="yes"';
  65.                 $optionSelectionMatch = true;
  66.             }
  67.             else
  68.             {
  69.                 $menuItemSelected = '';
  70.             }
  71.  
  72.             $popupMenu .= "<option value=\"$menuItem\" $menuItemSelected>$menuItem</option>\n";
  73.         }
  74.  
  75.         // If value supplied and there is no match, add anoterh option.
  76.         $externalOption = (!$optionSelectionMatch && !empty($value)) ? "\n<option value=\"$value\" selected=\"yes\">$value</option>\n" : '';
  77.  
  78.         // Finalize the popup menu.
  79.         $popupMenu .= "<option value=\"Other\">Other</option>$externalOption</select>\n";
  80.         $popupMenu .= "<div id=\"popupMenuOtherFieldPlaceholder\"></div>\n";
  81.  
  82.         // Return popup menu code.
  83.         return $popupMenu;
  84.     }
  85.     else
  86.     {
  87.         // Return an input field with a value, if any.
  88.         return "<input name=\"$name\" size=\"$size\" id=\"$id\" value=\"$value\">";
  89.     }
  90. }

Usage

string popupMenu( string $fileName[,string $relevantPath[, string $value[, string $name = popupMenu[, string $id = popupMenu[, int $size = 40]]]]])

Parameters

Name Definition Default Value
$fileName The name of the text file with the items. One option item per line. N/A
$relevantPath The local path to the file starting from the product’s work directory. The work directory is automatically detected. N/A
$value The value to match agains to preselect an option. N/A
$name The name attribute of the select/input HTML element. popupMenu
$id The id attribute of the select/input HTML element. popupMenu
$size The size of the input text field. 40

Return

The popupMenu function will return one of two possible form field.

  • A popup menu, i.e. a select with options, if a readable text file with a name and at location specified by the developer is found.
  • A text field, if the file specified by the developer is either not readable or cannot be found.

Examples

// Example 1 - Generate the options menu.
echo popupMenu('list-of-items.txt', 'bin');
 
// Example 2 - Generate the options menu with a preselected option.
print popupMenu('itemslist.txt', '', 'Apple');

Revision History

Date Version Changes
2013-08-29 01.00.00 Initial release.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.