I'm working on a project that involves being able to access dynamically 
generated form elements.

There are two parts to my project, a server-side element (written in ASP) 
and a client-side element (written in javascript). My server-side stuff 
works just great and does what I need it to do, but now that I'm working 
on the javascript stuff it's getting quite difficult.

Here's basically what's going on. I have the server check the current 
directory to see if there are any pictures in that directory. It then 
creates a dropdown box w/ all of the picture names in it (and the values 
of each of the pictures is the same as the name of the picture as well). 
The server also creates a bunch of hidden form fields for each of files it 
finds. There is a form field for the name of the thumbnail for that 
picture, the horizontal and vertical size for the thumbnail, whether the 
picture should be shown or not, and a small comment to go with the image 
(I'm basically creating a dynamic picture gallery if you haven't guessed 
by now).

Whenever I click on a choice in the dropdown box it should go to all of 
the hidden form fields associated w/ that name and grab those data values 
and stick them in some textboxes for the user to modify.

However, I have ran into quite a bit of trouble trying to figure out how 
to find the boxes. I read that you can do document.formname.elements
["nameofelement"] to get the object, but I was unable to do that. I kept 
getting the following error: document.formname.elements[...'.value is not 
a valid object.

As a final workaround, I finally just created a quick function that runs 
through a for loop and compares the .name of each of the form elements w/ 
the name I pass in. Once it finds the form element that matches that it 
passes back the number so I can do document.formname.elements[i].value, 
which works just fine. But when you have anything more than 5 or 6 
pictures in the list performance begins to drop on my 233 MMX system.

Here is what my (working) code currently looks like:

// <!--

	function getElement(name)
	{
		var element = -1;
		
		for (var i = 0; i < document.config.elements.length; i++)
			if (document.config.elements[i].name == name)
				element = i;

		return element;	
	}

	function saveSettings(image)
	{

		image = image.toUpperCase();
		
		if (image != "")
		{
			var element = getElement(image + "thumb")
			document.config.elements[element].value = 
document.config.imagethumb.value;
			document.config.elements[element + 1].value = 
document.config.imagehsize.value;
			document.config.elements[element + 2].value = 
document.config.imagevsize.value;
			document.config.elements[element + 3].value = 
document.config.imageshow.value;
			document.config.elements[element + 4].value = 
document.config.imagecomment.value;
		}
	}

	function loadSettings(image)
	{

		image = image.toUpperCase();

		if (image == "")
		{
			document.config.imagethumb.value = "";
			document.config.imagehsize.value = "";
			document.config.imagevsize.value = "";
			document.config.imageshow.value = "";
			document.config.imagecomment.value = "";
		}
		else
		{
			var element = getElement(image + "thumb")
			document.config.imagethumb.value = 
document.config.elements[element].value;
			document.config.imagehsize.value = 
document.config.elements[element + 1].value;
			document.config.imagevsize.value = 
document.config.elements[element + 2].value;
			document.config.imageshow.value = 
document.config.elements[element + 3].value;
			document.config.imagecomment.value = 
document.config.elements[element + 4].value;
		}
		
		document.config.currentpic.value = image;
	}

	function changePic()
	{
		saveSettings(document.config.currentpic.value);
		loadSettings(document.config.imagechoice.value);
	}
// -->