Question

after having done some research, I seek you for some jquery math help.

I would like to change a textfield, which states the price of a product, through “option rel=”

I put the html code here: http://jsfiddle.net/YjLM7/

So if the select list states:

<option selected="selected" rel="price-" value="0">50 x 50 cm</option>

The standard price is shown.

if I change the select list to:

<option rel="price-100" value="1">100 x 100 cm</option>

The price should increase by 100 (and go back -100, if first option is selected).

Would apreciate your help!

Here the full code:

<select>
<option selected="selected" rel="price-" value="0">50 x 50 cm</option>

<option rel="price-100" value="1">100 x 100 cm, Price add: €  100,00</option>
</select>

<p>Price</p>
<p><strong>200 €</strong></p>

<form method="post" action="catalog/category-1/product-1.html">
<input type="hidden" value="" name="productid">
<input type="submit" class="button" value="Add to cart" name="addcart">
</form>

​

Answer 1

See this jsfiddle.

<select>
   <option data-price="" selected="selected" value="0">50 x 50 cm</option>

   <option data-price="100" value="1">100 x 100 cm, Price add: €  100,00</option>
</select>

<p>Price</p>
<p><strong data-price="200">200 €</strong></p>

<form method="post" action="catalog/category-1/product-1.html">
      <input type="hidden" value="" name="productid">
      <input type="submit" class="button" value="Add to cart" name="addcart">
</form>
​
​

and JS:

$("select").change(function(){
   var price = parseFloat($(this).find("option:selected").data("price"));
   if(isNaN(price))
       price = 0;
   var currPrice = parseFloat($("strong").data("price"));
   $("strong").text(currPrice + price + ' €');
})​

​