I've got a drop down menu for choosing a price option. The default option is select, and then once an option is chosen, I update the Total Price value to reflect the options price. So that works ok, but if you go back to choose 'select' again, I get 'undefined' in my total value...
Here's the code
Mark up
<form class="optionsForm" name="form{$option.optionID}" action="/view-cart.html" enctype="multipart/form-data" method="post" >
<input type="hidden" value="{$option.optionPrice}" name="productPrice" id="optionPrice" />
<input type="hidden" value="{$product.productID}" name="instanceID" />
<input type="hidden" value="add" name="action"/>
<input type="hidden" value="products" name="componentID"/>
<input type="hidden" value="{$option.optionID}" name="options[optionID]" id="optionID"/>
<input type="hidden" value="add" name="action"/>
{* If there is only one option, don't show the select option row *}
{if count($product.productOptions) > 1}
<h4 class="optionsFormTitle">Please select your options</h4>
<div class="optionsRow">
<select name="options" class="dropDown">
<option value="0.00">Select</option>
{foreach $product.productOptions option}
<option value="{$option.optionID}">{$option.optionTitle}
{if $option.optionPrice > $product.pricesFrom} £{$option.optionPrice}{/if}
</option>
{/foreach}
</select>
</div>
{/if}
<div {if count($product.productOptions) > 1} class="totalRow" {else} class="noOptionTotalRow" {/if} >
Total<span class="productPrice optionPrice"> £0.00</span>
<input type="submit" value="Add To Basket" class="buyNowButton" />
</div>
</form>
Javascript...
products.prices = new Array;
$.get('/ajax/' + window.location.pathname, function(data) {
for (var optionID in data)
products.prices[optionID] = data[optionID];
$('.optionsRow select').change(function() {
var requested = $(this).val();
$('.optionPrice').html('£' + products.prices[requested]);
$('#optionPrice').val(products.prices[requested]);
$('#optionID').val(requested);
});
});