Another problem involving format-for-PHP Javascript functions and form elements

[Phil Powell]

function populateWithPics(folder) {
if (folder.value != '') {
monthIndex = folder.name.substring(folder.name.indexOf("'") + 1,
folder.name.indexOf('\]') - 1);
indexArray = folder.value.split('|');
index = indexArray[0];
if (!isNaN(index)) {
for (i = 0; i < picsArray[index].length; i++) {
document.calendarPicForm.elements['pics\[' + monthIndex +
'\]'].options[i + 2].value = picsArray[index][i];
document.calendarPicForm.elements['pics\[' + monthIndex +
'\]'].options[i + 2].text = picsArray[index][i];
}
}
}
}

The preceeding code is going to populate a dropdown named pics['0'] or
pics['5'] or pics['digit between 0 and 11'] with contents found in
picsArray[0] or picsArray[5], etc.

However upon attempt to do so I am getting the following error:

"document.calendarPicForm.elements['....'] is null or not an object"

Here is the script for the dropdown (an example, since there are 12 of
them to choose from):

<select name=pics[2]>
<option value="">
Choose a picture to display for the month of Mars:
</option>
<option value="">-------------------------------------------</option>
</select>

And picsArray is a 2-dim TCL-generated server-side array:

<script type="text/javascript">
<!--
picsArray[0] = new Array(7);

picsArray[0][0] = '/images/bands/Crimson_Moonlight.jpg';

picsArray[0][1] = '/images/bands/Crimson_Thorn.jpg';

picsArray[0][2] = '/images/bands/Extol.JPG';

picsArray[0][3] = '/images/bands/Lengsel.jpg';

picsArray[0][4] = '/images/bands/Vaakevandring.jpg';

picsArray[0][5] = '/images/bands/Zane_Matthews_04.jpg';

picsArray[0][6] = '/images/bands/vaakevandring2.jpg';

//-->
</script>

Bottom line: I want to populate a corresponding dropdown with a
corresponding 2-dim array upon selecting something from one of 12
dropdowns. The function fails due to the structure of of the form
element, so I am not sure what to do at this point, so I need help
again.

Thanx
Phil

 

[Michael Winter]

[snip]

The preceeding code is going to populate a dropdown named pics['0'] or
pics['5'] or pics['digit between 0 and 11'] with contents found in
picsArray[0] or picsArray[5], etc.

However upon attempt to do so I am getting the following error:

"document.calendarPicForm.elements['....'] is null or not an object"

Here is the script for the dropdown (an example, since there are 12 of
them to choose from):

<select name=pics[2]>[/QUOTE]

This is most likely to be the source of the problem. Only a combination of
letters, numbers, colons (:), underscores (_), periods (.), and hyphens
(-). Any other character requires the entire attribute value to be quoted.
I expect that if you check the document tree, that SELECT element has a
name attribute of "pics".

[snip]
[QUOTE]
<script type="text/javascript">
<!--[/QUOTE]

Hiding scripts is an obsolete practice. Remove the SGML comment delimiters.
[QUOTE]
picsArray[0] = new Array(7);

picsArray[0][0] = '/images/bands/Crimson_Moonlight.jpg';

picsArray[0][1] = '/images/bands/Crimson_Thorn.jpg';

picsArray[0][2] = '/images/bands/Extol.JPG';

picsArray[0][3] = '/images/bands/Lengsel.jpg';

picsArray[0][4] = '/images/bands/Vaakevandring.jpg';

picsArray[0][5] = '/images/bands/Zane_Matthews_04.jpg';

picsArray[0][6] = '/images/bands/vaakevandring2.jpg';[/QUOTE]

[snip]

Look into using array literals. You could write the above with

picsArray = [
[ '/images/bands/Crimson_Moonlight.jpg',
'/images/bands/Crimson_Thorn.jpg',
'/images/bands/Extol.JPG',
'/images/bands/Lengsel.jpg',
'/images/bands/Vaakevandring.jpg',
'/images/bands/Zane_Matthews_04.jpg',
'/images/bands/vaakevandring2.jpg' ],
[ /* picsArray[ 1 ] */ ]];

Hope that helps,
Mike