File: formextra.inc

<?

/*
Copyright Drs. Jelte 'YeeHaW' Werkhoven
19-4-01
ver 0.9 final beta =)

With this extension of the basic form class you can add my own custom built multiple selectboxes. Don't forget to print the variables RawHTML and JavaScript that are generated by this class.
This will generate a hidden field called STrefwoord + The number of the selectbox in the form which has a ';' seperated list of selected indexes.
It takes a lot of parameters, some of which optional.
1: Label, the name of the CSS identifier the selectbox will be given
2: Values, is an 2-d array of values for the selectbox. One row per option, comprising of a column for the value and a column for the text
3: Form, is the name of the form in which the multiple-selectbox will be placed
4: TWS, is a DB-result array which'll give the selected values for one certain id. Thus, it's a 2-d array containing one column and multiple rows, each row being one stored option value. It might seem silly to put this in a 2-d array as opposed to a 1-d array, but I often use this class to allow users to index an article with a certain selection of index words. When they later wish to reedit an article, it has to be linked to the same indexwords, and I pull them out of a database. 
5: SelectBoxNo, the number of the selectbox if there're more than one multiple-selectboxes in the same form
6: The SSTrefwoord array, if a article has to be reedited. This comprises of option texts delimited by a HTML <br>
7: The name of the selectbox, defaults to CSS identifier
*/
class formextra extends form
	{
	 function MultipleSelectBox($Label, $Values, $Form, $TWS, $SelectBoxNo="1", $SSTrefwoord="", $Name="")
		{##The name of the selectbox is per standard the same as the css id
	 	 if ($Name=="")
			{
		 	 $Name = $Label;
			}

	##This'll sort out Netscape 4.x users from other browser-users, cuz some of the tricks here simply won't work for NS4.x
	 
	if (!(eregi ("ozilla.[4]", $GLOBALS["HTTP_USER_AGENT"]) && !eregi("MSIE", $GLOBALS["HTTP_USER_AGENT"])))
	 	{
		 ## if this isn't the first selectbox to be called, we don't need all this javascript stuff again
	 	 if ($SelectBoxNo == 1)
		 	{
			 /*this defines the SelectIt JavaScript function, which'll basically do two things:
				1: It'll make a string called STrefwoorden, which is a ; delimited list of option values selected, 
				   and stick it into a hidden field called STrefwoord + the number of the Selectbox
				2: It'll make a string called SSTrefwoorden, which is a <br> delimited list of option texts selected,
				   and stuff it into a <div> field called SSTrefwoorden + the number of the Selectbox						    
			  The function is called from the selectbox onChange (see below) and takes four paramaters:
				1: HiddenName, name of the hidden form field that contains the option values
				2: SelectName, name of the selectbox
				3: DivId, the identifier for the <div> tag
				4: SelNo, the number given to the selectbox, if the bax contains multiple multiple-selectboxes.

			*/	
			 $this -> JavaScript .=
				"
				 var Index;
			 	 var Index2;
	 		 	 var Length;
			 	 var x;

			 	 function SelectIt(HiddenName, SelectName, DivId, SelNo)
					{
	 	 			 Stuff = eval('document.$Form.' + SelectName);
					 Thingy = eval('document.$Form.' + HiddenName);
					 
					 STrefwoorden = 'STrefwoorden' + String(SelNo);
					 SSTrefwoorden = 'SSTrefwoorden' + String(SelNo);
					 
					 STrefwoorden = Thingy.value;
					 
					 SSTrefwoorden = document.getElementById(DivId).innerHTML;
					
					 x = Stuff.selectedIndex;
	 
					 Index = STrefwoorden.indexOf(Stuff.value);

					 if (Index == -1)
						{
					 	 STrefwoorden = Stuff.value + ';' + STrefwoorden;
						 SSTrefwoorden = Stuff.options[x].text+ '<br>' + SSTrefwoorden;
						}
					 else
						{
						 STrefwoorden = STrefwoorden.slice(0, Index) + STrefwoorden.slice(Index+2);
						 Index2 = SSTrefwoorden.indexOf(Stuff.options[x].text);
						 Length = Stuff.options[x].text.length +4;
						 SSTrefwoorden = SSTrefwoorden.slice(0, Index2) + SSTrefwoorden.slice(Index2 + Length);
						}
					 
					 Thingy.value = STrefwoorden;
	 				 
					 document.getElementById(DivId).innerHTML = SSTrefwoorden;
					
	
					 Stuff.selectedIndex = 0;
					 
	  	
					}";
		  	}
		### TWS is meant to be a DB-result (2-d array) with the options values as stored in a database
		### This converts the 2-d array to a STrefwoord string, a ; delimited list of option values
		 if (count($TWS) > 0)
			{
		 	 foreach($TWS As $TW)
				{
		 	 	 $STrefwoord = $STrefwoord.$TW[0].";";
		 	 	}
			 ### This'll add the selectbox itself		
		  $this -> RawHTML .= "<select id='$Label' name='$Name' onChange=\"SelectIt('STrefwoord$SelectBoxNo', '$Name', 'Trefwoorden$SelectBoxNo', $SelectBoxNo)\">\n";
			
			foreach($Values as $Value)
				{
				 $this -> RawHTML .= "<option value='".key($Values)."'>$Value\n";
				 next($Values);
				}
	
	 	 $this -> RawHTML .= "</select>\n";
		 
		 ### This is the hidden field with the actual option values
		 $this -> RawHTML .= "<input type='hidden' name='STrefwoord$SelectBoxNo' value='$STrefwoord'>\n";
		 
		 ### This is the <div> field which'll contain the selected option texts. Position it with CSS.
		 $this -> RawHTML .= "<div id='Trefwoorden$SelectBoxNo'>$SSTrefwoord</div>\n";


		}
	else 
		{
		### This'll handle NS4.x, which'll basically default to a standard <select multiple> box, which stores it's
		### selected values in a hidden field called STrefwoord + the number of the selectbox, same as with non netscape 4.x 
		### browsers. This'll allow you to handle the selected stuff in the calling script the same way for each browser.
		### This piece of Javascript put the selected stuff into the hidden field. The function is called onChange from
		### the selectbox
	 	 $this -> JavaScript .= "
		
				function SelectIt$SelectBoxNo()
					{
					 var SW='';
					 
					 var the_select = window.document.$Form.$Name;

					 for (loop=0; loop < the_select.options.length; loop++)
						
						{
						 if (the_select.options[loop].selected == true)
							{
							 SW += the_select.options[loop].value + ';';
							}
						}
					 
					 window.document.$Form.STrefwoord$SelectBoxNo.value = SW;
					}
				";
			### The selectbox itself
	 	 $this -> RawHTML .= "<select id='$Label' name='$Name' multiple onChange='SelectIt$SelectBoxNo()'>";
	 
	 	 $countTWS = count($TWS);
	 	 
		 ### This piece'll select the right values, if there's already stuff selected when the page reloads e.g.
	 	 foreach($Values as $Value)
			{
		 	 if ($countTWS > 0)
				{
 	        		 foreach ($TWS as $TWW)
					{
					 				 	 
					 if (key($Values) == $TWW[0])
						{
					 	 $this -> RawHTML .= "<option value='".key($Values)."' selected>$Value\n";
					 	 $V++;
						}
					}
				}
		 
		 	 if ($V == 0)
				{
		 	 	 $this -> RawHTML .= "<option value='".key($Values)."'>$Value\n";
				}
		 
		 	 $V = 0;
		 
		 	 next($Values);
			}
	 	 
	 	 $this -> RawHTML .= "</select>";
	 	 
		 ### This'll put already selected stuff into the hidden field in the form of the STrefwoord ; delimited value string
		 if ($countTWS > 0)
			{
		 	 foreach($TWS As $TW)
				{
		 	 	 $STrefwoord = $STrefwoord.$TW[0].";";
		 	 	}
			}
		 
		 ### The hidden field
		 $this -> RawHTML .= "<input type='hidden' name='STrefwoord$SelectBoxNo' value='$STrefwoord'>\n"; 	
		}
	}
}

#### That's all folks! Enjoy
	}