Expanding existing Dropdown function

Taking a working function and taking it further

[bundius]

Hi Guys,

I'm trying to expand a working JS function to cope with new requirements from the Business Owner, but my very limited knowledge of javascript is hindering me.

Currently we have a function which reads the contents from a HTML option list and adds it to a shopping cart. However, the Business Owner wants to add lots of separate option lists, while retaining only a single add to cart button. I did it as lots of duplicate functions, but he was unhappy with lots of add to cart buttons.

The functions code is:

<script>
function AddOneOfManyToCart(formToUpdate)
{
selectedObj = formToUpdate.PRODUCTSELECTOR[formToUpdate.PRODUCTSELECTOR.selectedIndex];

nameVal = selectedObj.getAttribute("name");
if (nameVal == "NOTHING") {
alert('Please select a product');
return false;
}

formToUpdate.NAME.value = nameVal;

costVal = selectedObj.getAttribute("cost");
formToUpdate.PRICE.value = costVal;

id_numVal = selectedObj.getAttribute("id_num");
formToUpdate.ID_NUM.value = id_numVal;

shippingVal = selectedObj.getAttribute("shipping");
formToUpdate.SHIPPING.value = shippingVal;

switch( formToUpdate.PRODUCTSELECTOR[formToUpdate.PRODUCTSELECTOR.selectedIndex].value ) {
}
AddToCart(formToUpdate);
}
</script>

The small form which is runs is( this has been anonimised a little):

<div align="left"><!--<input size="2" maxlength="3" name="QUANTITY"
onchange="this.value=CKquantity(this.value)" value="1" type="text"> --><input
name="Quantity" value="1" type="hidden"><input name="PRICE" id="PRICE"
value="" type="hidden"><input name="NAME" id="NAME" value=""
type="hidden"> <input name="ID_NUM" id="ID_NUM" value="" type="hidden"><input
name="SHIPPING" value="" type="hidden">
<select name="PRODUCTSELECTOR">
<option selected="selected">Please select </option>
<option cost="#*$!" name="#*$!"
id_num="xxx" shipping="">Item XXX</option>
<option cost="yyy" name="yyy"
id_num="yyy" shipping="">item yyy</option>

</select>
<input name="image"
onclick="AddOneOfManyToCart(this.form); location.reload()"
value="&nbsp;Add to Cart »&nbsp;" onmouseover="this.style.color='#ffffff';"
onmouseout="this.style.color='#FFF';"
style="border: 0pt none ; color: rgb(255, 255, 255);"
class="button" align="top" border="0" height="35" type="submit" width="90"> </div>

They want to be able to include several of these option list blocks, but have only one add to cart button and have it ignore lines where no options are selected.

Anyone any ideas?

Thanks very much

[Bernard Marx]

Bit confused here. How is the Shopping Cart operated exactly?

Is there any reason that the SELECTs can't post their values to the server-script by themselves, or do they need to be collected up?

[bundius]

The Cart itself uses a Bespoke Perl CGI to do the ordering process via some internal systems and I'm not allowed to give out details of those.

The selects are controlled by this javascript for legacy reasons and are used to attach part specific optional items to a master part.

Could the function be expanded using a for loop to iterate through several sets?

I'm sorry to be vague, but I'm not a javascript developer , I just got asked to support this legacy app as there is no budget currently to redeploy this in a smarter way.

[bundius]

Ok,

I'm hoping a little clarification might get me a little further than my fairly feeble explanations so far :)

what I'm tying to achieve is:

<div align="left"><!--<input size="2" maxlength="3" name="QUANTITY"
onchange="this.value=CKquantity(this.value)" value="1" type="text"> --><input
name="Quantity" value="1" type="hidden"><input name="PRICE" id="PRICE"
value="" type="hidden"><input name="NAME" id="NAME" value=""
type="hidden"> <input name="ID_NUM" id="ID_NUM" value="" type="hidden"><input
name="SHIPPING" value="" type="hidden">
<select name="PRODUCTSELECTOR">
<option selected="selected">Please select </option>
<option cost="#*$!" name="#*$!"
id_num="#*$!" shipping="">Item XXX</option>
<option cost="yyy" name="yyy"
id_num="yyy" shipping="">item yyy</option>

</select>
<br />
<!--<input size="2" maxlength="3" name="QUANTITY"
onchange="this.value=CKquantity(this.value)" value="1" type="text"> --><input
name="Quantity" value="1" type="hidden"><input name="PRICE" id="PRICE"
value="" type="hidden"><input name="NAME" id="NAME" value=""
type="hidden"> <input name="ID_NUM" id="ID_NUM" value="" type="hidden"><input
name="SHIPPING" value="" type="hidden">
<select name="PRODUCTSELECTOR">
<option selected="selected">Please select </option>
<option cost="#*$!" name="#*$!"
id_num="xxx" shipping="">Item XXX</option>
<option cost="yyy" name="yyy"
id_num="yyy" shipping="">item yyy</option>

</select>
<input name="image"
onclick="AddOneOfManyToCart(this.form); location.reload()"
value="&nbsp;Add to Cart »&nbsp;" onmouseover="this.style.color='#ffffff';"
onmouseout="this.style.color='#FFF';"
style="border: 0pt none ; color: rgb(255, 255, 255);"
class="button" align="top" border="0" height="35" type="submit" width="90"> </div>

so several of the select sets, then have the javascript function process them, one at a time and gather their values and process them according to the existing AddToCart function.

Hope this helps. I just don't know how to get the javascript to loop through multiple select groups as I don't normally do javascript.