0

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} &pound;{$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"> &pound;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);
        });


    });
4

1 に答える 1