Trying to validate Dropdown menu first, then execute remaining code

[Xccelerant]

Hello,

Trying to validate Dropdown menu first, then execute remaining code in a form. The dropdown is for size info, and if s size is not selected to pop up an alert. But if a size is selected it should continue the function in the onSubmit of the form. This works in Firefox and Safari but doesn't work in IE.

This is the form section:

<form name="cartListForm1" onSubmit="store(document.cartListForm1.quantity.value,(document.cartListForm1.productSelected.value+document.cartListForm1.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!!!

 

[BillyRayPreachersSon]

Change this:

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

to this:

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);"

You shouldn't really use an onclick event of the form to stop the form submission.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Xccelerant]

Hello Dan,

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 trying,
X