How to pass particular form to javascript function?

[SanSui]

Say I've got these functions. They're used to switch the color and background image of a button and imagefield respectively, depending on a user's choice from a menu list. Keep in mind this is just for Explorer at the moment while I'm trying some things out:

function changeColorBox()
{
eval("document.form1.button.style.backgroundColor='" + document.form1.ColorMenu.options[document.form1.ColorMenu.selectedIndex].value + "'");
eval("document.images.imageField.src='images/spacer.gif'");
eval("document.form1.printSelect.options.selectedIndex='0'");
eval("document.form1.button.value=''");
}
function changeBackground()
{
eval("document.images.imageField.src='" + document.form1.printSelect.options[document.form1.printSelect.selectedIndex].value + "'");
eval("document.form1.button.style.backgroundColor='white'");
eval("document.form1.ColorMenu.options.selectedIndex='0'");
eval("document.form1.button.value='Print Selected'");
}

As you can see, this works for one form only - "form1". I want to be able to pass a variable form name so I can use these functions for multiple forms.

<select style="width:120" onChange="changeColorBox(this);" name="ColorMenu">

[adios]

Some quick observations:

If you wanted to 'un-optimize' your code, so that it would run as slowly as possible, you'd be on the right track. Lose the eval()s! You'll rarely need this slow-running routine; and, until you're more experienced at JavaScript, should avoid it at all cost. Also: always pass the object (whenever possible) in a form element event handler function call. And: Select.selectedIndex is an integer - and it's a property of Select, not Select.options.

function changeColorBox(oSelect)
{
	var oForm = oSelect.form;
	oForm.button.style.backgroundColor = oSelect.options[oSelect.selectedIndex].value;
	document.images.imageField.src = 'images/spacer.gif';
	oForm.printSelect.selectedIndex = 0;
	oForm.button.value = '';
}

function changeBackground(oSelect)
{
	var oForm = oSelect.form;
	document.images.imageField.src = oSelect.options[oSelect.selectedIndex].value;
	oForm.button.style.backgroundColor = 'white';
	oForm.ColorMenu.selectedIndex = 0;
	oForm.button.value = 'Print Selected';
}

<select style="width:120" onChange="changeColorBox(this)" name="ColorMenu">

[SanSui]

Thanks for the words of wisdom =) This has helped quite a bit, now I need to alter the image to be specific to each form as well. Can I pass the image name to the function along with 'this' so the function targets just that image? Each form will have its own colorbox and imagebox controlled by the select menus.

I tried using an image input and changing the source property but it did absolutely nothing.

[adios]

Do you have any functioning - more or less - code that you could post/link to? Easier to chat about this when we can see what's up....

[SanSui]

http://www.rvww-test.net/AmericanScrubs/test_script.html

Here we go.

[SanSui]

I made a crude adjustment, giving the images the same name as their respective form names and then using that for:

document.images[myimg].src = oSelect.options[oSelect.selectedIndex].value;

Seems to work, but I'm sure there's a better way

[adios]

OK, zipped it. Hope it's self-explanatory.

[SanSui]

Where's the attachment?

Don't they normally show up with links in the post on these forums?

[SanSui]

Ahh, there it is =)

I'm looking through it now. I like how you used an array for the images, I think I might do that for the colors too since those values will also have to be submitted.

Thanks a bunch, I can take it from here

[adios]

I like how you used an array for the images, I think I might do that for the colors too since those values will also have to be submitted.

Exactly. Don't corrupt your data submission just to script helpful behaviors; plenty of arrays to go around. Use the select values as hash keys to them. Don't use form elements unless there's a reason. Might conside a preloader (faster display). Drink your milk.