Modifying values between forms

I have a page where I usually grab size information about a product from a <select> object, but every once in awhile, there's only 1 size left, and I instead pass it as an <input type=hidden name=size> object.

Two different forms on my page need this one value, and I use onChange when it's a select to set the value in my other form. This is happy. However, I'm having trouble getting the <input> object to reset itself properly. For the input object, I'm using onClick at the submission point, and I'm not even sure it's being called.

Can anyone see anything obviously wrong?

function get_selected_option() {
document.form1.size.value =
unescape(document.form2.size.options[document.form2.size.selectedIndex].value);
# This next bit is what's not working...
if (document.form1.size.value == "invalid") {
document.form1.size.value = unescape(document.form2.size.value); }
return TRUE; }

Here's my onChange (which works):
# form 2
<select name="size" onChange="get_selected_option();">

Here's my onClick (which might not be working):
# form 1
<input type=hidden name=size value=12>

# form 2
<input type=hidden name=size value="invalid">
<img src="Image.gif" height=25 width=100 border=0 title="Submit" onClick="get_selected_option();">

form2.size.value is always "invalid" after I click on the form 2 submit button. I'm perplexed.

Thanks for any help you can offer,
-k.