I've created an XML data structure incorporating item title and price as well as per-option images. It looks like this:
<items>
<item>
<id>43522</id>
<title>abc</title>
<category>xyz</category>
<price>0.00</price>
<image description="xyz">images/products/abc.jpg</image>
<optionsets>
<optionset value="Color" id="0">
<option value="abc1.jpg">Texas
Orange</option>
<option value="abc2.jpg">Charcoal</option>
</optionset>
<optionset id="1" value="Size">
<option value="sizes/size_s.gif">Small</option>
<option value="sizes/size_m.gif">Medium</option>
<option value="sizes/size_l.gif">Large</option>
<option value="sizes/size_xl.gif">Xtra Large</option>
<option value="sizes/size_2x.gif">XXtra Large</option>
</optionset>
</optionsets>
</item>
</items>
I re-create the form for items with optionsets or present a simple link for items without optionsets. I have replaced select inputs with a list of images with onclick handlers to set hidden inputs. This all works nicely, but I'd like to do a simple validation to ensure that the shopper has selected a color and image before the form is submitted. However, it's not obvious to me how to integrate this with the way you handle form submission. I'm replacing your image input onclick function with a call to return my own
validateForm():
<input type="image" src="images/ej/ej_add_to_cart.gif" onclick="javascript:return validateInput(this.parentNode);" />
<script type="text/javascript">
function validateInput(form) {
for (i=0;i<form.elements.length;i++) {
if (form.elements[i].value == '') {
alert("Please select a color and/or size by clicking the
icons");
return false;
}
}
return EJEJC_lc(this);
}
function EJEJC_lc(th) { return false; }
</script>
My alert works in that it prevents the submission from proceeding when the options haven't been selected, but is broken in that a validated submission makes the cart appear in another window rather than as an overlay - how do I validate and still get the overlay?
