Handling Multiple Selections in a SELECT Element

When the MULTIPLE attribute is specified for the HTML <SELECT> tag, the user is allowed to select multiple options. When a user selects multiple options in a SELECT element that resides in an ION_FORM, the $Form variable created on the page that is loaded when the form is submitted contains the value of all selected options, separated by the "|" character. For example, suppose an ION_FORM contains the following SELECT element:

<SELECT NAME="region" MULTIPLE>  
    <OPTION>East</OPTION>  
    <OPTION>West</OPTION>  
</SELECT>

If the user selects both options and submits the form, the value of the $Form.region variable on the page that is loaded will be the string "East|West". You must then parse the value of $Form.region to extract the values contained in the string. The following sections illustrate two different methods of handling SELECT elements when the MULTIPLE attribute is used.

Parsing the $Form Variable in an <IDL> Block

This example demonstrates how you could use the IDL STRSPLIT function to extract multiple values from a $Form variable.

<ION_SCRIPT>  
  
<ION_HEADER>   
   <EVENTS>   
      <EVENT_DECL NAME="DISPLAY"  ACTION="ion:///page2.ion"/>   
   </EVENTS>   
</ION_HEADER>   
  
<ION_BODY>  
  
<ION_FORM>  
   <SELECT NAME="Region" MULTIPLE>  
      <OPTION>East</OPTION>  
      <OPTION SELECTED>West</OPTION>  
   </SELECT>  
   <ION_BUTTON TYPE="BUTTON" EVENT="DISPLAY" LABEL="Display"/>   
</ION_FORM>  
  
</ION_BODY>  
</ION_SCRIPT>

<ION_SCRIPT>  
  
<ION_BODY>  
  
<ION_DATA_OUT>  
   <IDL>  
      str = '<ION_VARIABLE NAME="$Form.Region"/>'  
      str_array = STRSPLIT(str, '|',/EXTRACT)  
      parse_str_array, str_array  
   </IDL>  
</ION_DATA_OUT>  
  
</ION_BODY>  
</ION_SCRIPT>

pro parse_str_array, array  
   length = n_elements(array)  
   for i=0,length-1 do begin  
      print, array[i]  
   endfor  
end

Instead of printing the values contained in the $Form variable, you could pass the IDL variables to ION Script variables. Refer to the example "Passing IDL Variables to ION Script Example" on the ION Script Advanced Examples page (index_examples.ion).

Parsing the $Form Variable in a <SCRIPT> Block

This example demonstrates the use of a <SCRIPT> block to extract multiple values from a $Form variable.

<ION_SCRIPT>  
  
<ION_HEADER>   
   <EVENTS>   
      <EVENT_DECL NAME="DISPLAY"  ACTION="ion:///page2.ion"/>   
   </EVENTS>   
</ION_HEADER>   
  
<ION_BODY>  
  
<ION_FORM>  
   <SELECT NAME="Region" MULTIPLE>  
      <OPTION>East</OPTION>  
      <OPTION SELECTED>West</OPTION>  
   </SELECT>  
   <ION_BUTTON TYPE="BUTTON" EVENT="DISPLAY" LABEL="Display"/>   
</ION_FORM>  
  
</ION_BODY>  
</ION_SCRIPT>

<ION_SCRIPT>  
<ION_BODY>  
  
<SCRIPT LANGUAGE="JScript">  
var str = '<ION_VARIABLE NAME="$Form.Region" DISPLAY="FALSE"/>';  
var str_array = str.split('|');  
for (i=0;i<str_array.length;++i) {  
   document.write(str_array[i]);  
   document.write('<br>');  
}  
</SCRIPT>  
  
</ION_BODY>  
</ION_SCRIPT>

IDL Online Help (March 06, 2007)