Problem validating Dropdown menu first, then executing remaining code in a form

[Xccelerant]

Hello,

Having a problem trying to validate a Dropdown menu first, then execute remaining code in a form. Problem is in IE the alert always pops up and you can't submit. Even when you click on the dropdown the alert pops up. But this works in Firefox and Safari. Any way to have it verify first then have it continue to the OnSubmit action within the form?

This is the form section:

<form name="cartListForm1" onSubmit="store(document.cartListForm1.quantity.value,(document.cartListForm1.productSelected.value+document.c artListForm1.size.options[document.cartListForm1.size.selectedIndex].value),document.cartListForm1.price.value);" onclick="return validateForm(this)"> <table><tr><td><left>

<input type="hidden" name="productSelected" value="AMERICAN TEE"></center></td></tr><tr><td>
<left>SIZE:
<font size="0" face="arial"><select name="size" onChange="chgImage(this.form)">

<option value="">Select Size</option>
<option value="-Sml">small</option>
<option value="-Med">medium</option>
<option value="-Lrg">large</option>
<option value="-XLrg">XL</option>
</select></font></center>

<br><input name="imageField" type="image" value="ADD TO CART" src="images/chrome_menu_images/Add_to_cart.gif" width="90" height="25" border="0">
</center></td></tr></table>
</form>



This is the Javascript to check to make sure a size has been selected and to rewrite the size names:
function validateForm(theForm) {

if ( theForm.size.options[ theForm.size.selectedIndex ].value != "" &&
theForm.quantity.value != "" ){

return true;

}
else {

alert("Please select a Select Size and Quantity");

return false;
}
}

NewOpt = new Array
NewOpt[0] = new Option( "" );
NewOpt[0].value = '';
NewOpt[1] = new Option( "large" );
NewOpt[1].value = '-Lrg';
NewOpt[2] = new Option( "medium" );
NewOpt[2].value = '-Med';
NewOpt[3] = new Option( "small" );
NewOpt[3].value = '-Sml';
NewOpt[4] = new Option( "XL" );
NewOpt[4].value = '-XLrg';

function chgImage(theForm){

document.mainimage.src=NewOpt[ theForm.size.selectedIndex ].imagemedium;
}
</script>
End Javascript size check-->

Any help would be greatly appreciated!!!

[Kor]

There is no logic to use onclick upon the form element. Call your validation function within the same onsubmit event handler:

onsubmit="store(document.cartListForm1.quantity.value,(document.cartListForm1.productSelected.value+ document.cartListForm1.size.options[document.cartListForm1.size.selectedIndex].value),document.cartListForm1.price.value);return validateForm(this)"

[Xccelerant]

Hello Kor,

I tried that, calling the validate function on submit, but for some reason then it doesn't validate. It runs the store script and sends a product with no size to the cookie. I tried moving it to the beginning of the onsubmit, then the store function doesn't work.

I'm attaching the product and cart files maybe this well help find a solution. There are two alerts, one if a size hasn't been chosen, and one if everything is okay. Then when the cart is selected there should be a size next to the product name. Right now I can click through with no size and the alert doesn't pop-up, then I have an item in the cart with no size.

Thanks for taking a look at it,
X