Question

This fiddle is not the complete set of code. However it is the isolated code in which I am having a problem.

This works in all versions of IE, and will not work in Safari/Chrome. Specifically I am trying to get this to work on an IPAD. The Select button will push, and the function will not do anything, and will essentially be stuck there… Anyone have any suggestions?

http://jsfiddle.net/Eh9QC/

function selectStatements(f)
            {
            var selectedArray = new Array();
            var selObj = document.getElementById('statementGroups');
            var i = 1;
            var count = 0;
            for (i=0; i<selObj.options.length; i++)
                {
                 if ( (selObj.options[i].selected) && count<20 )
                   {
                     selectedArray[count] = selObj.options[i].value;
                     count ++;
                   }
                }
            f.chosenStatements.value = selectedArray;
            document.glStatementForm.glaction.value = "updateChosenList";
            document.glStatementForm.action="glstsend.shtml";
            document.glStatementForm.method="POST";
            document.glStatementForm.submit();
            }
   </script>​​​

HTML:

      #IF EXPR = (clientState == "setList")                   -->
    <div id="openBox2">
                 <tr>
                     <td VALIGN="top"><B>Statements:</B>
                     <td VALIGN="top">
                     <SELECT NAME="statementGroups" SIZE=10 MULTIPLE>                                               <!--
                               #SET NAME = ldx VALUE = 0                                                         --><!--
                               #WHILE EXPR=(ldx < disp_list_count)                                               -->
                                      <OPTION VALUE= "(*disp_dropdown_value[ldx]*)">(*disp_dropdown_text[ldx]*)     <!--
                                      #SET NAME = ldx VALUE = ldx + 1                                            --><!--
                              #ENDWHILE                                                                          -->
                     </SELECT>

                 <tr>
                     <td> <BR />
                     <td> <INPUT TYPE=BUTTON VALUE="Select" STYLE="font:8pt Arial" ONCLICK="selectStatements(this.form);">
                                                                         <!--
              #ENDIF                                                  -->

             </table>
    </div>
   ​

Answer 1

First, you have

var selObj = document.getElementById('statementGroups');

referring probably to this element in the HTML

<SELECT NAME="statementGroups" SIZE=10 MULTIPLE> 

but this element does not have any id assigned. To be confident browsers will find it you need

<select name="statementGroups" id="statementGroups" size="10" 
multiple="multiple">

Second,

document.glStatementForm...

presumably refers to a form with id or name “glStatementForm”. But this is not a usual way to refer to it, unless you’ve somehow deliberately added it to the document namespace. I’m not sure what the most cross-browser-compliant way of accessing form fields is, but probably something like:

var glsForm = document.getElementById('glStatementForm'),
glsForm.elements['action'].value = "updateChosenList";
glsForm.action = "glstsend.shtml";
glsForm.method = "POST";
glsForm.submit();

and also make sure in the HTML that you set the id attribute of the glStatementForm.