输入更改更新价格div

Question

So basically what I am trying to do is a simple cart update, with the total price and quantity change -> price update. I have ran into a problem which I cannot solve, jQuery is not my language but I understand the basic of it.

And I would appreciate if you could tell me what I did wrong in that code and what I should think about in the future also if the total price will be able to update using two diffrent items and quantity.

<table cellspacing="2" cellpadding="0" border="0" width="280">
    <tr>
        <td width="140" valign="top" align="left"><div class="product_name">T-shirt, Black XS</div><div class="product_serial">Art.nr: <a href="javascript:void(0);">#TS4502-BL</a></td>
        <td width="30" valign="top" align="center"><input type="text" id="quantity" value="1" maxlength="2" /></td>
        <td width="80" valign="top" align="center"><div class="product_total_cost" id="price" value="199">199 kr</div></td>
        <td width="9" valign="top" align="right"><div class="remove_product">X</div></td>
    </tr>
</table>

<table cellspacing="2" cellpadding="0" border="0" width="280">
    <tr>
        <td width="110" valign="middle"><div class="procental_off">-10%</div><div class="cart_total_cost" id="total"> 358,2 kr</div></td>
        <td width="70" valign="middle" align="center"><div class="cart_clear">Rensa</div></td>
        <td width="100" valign="top" align="right"><div class="cart_continue">Fortsätt</div></td>
    </tr>
</table>

With the following jQuery code I found on the internet and tried to make it work with my code.

<script type="text/javascript">
    $('#quantity').change(function(event) {
        $('#price').html($('#quantity').val()* $('#price').val());
    }); 
</script>

Answer 1

#price is a div and does not have a value (even if you typed it, it's invalid)

You may want to consider something like this

$('#quantity').change(function (event) {
    $('#price').html($(this).val() * parseInt($('#price').text(), 10));
      // parseInt converts in this case strings to integers
});

EDIT: The problem now is that you have to reset the price... didn't see that at first

http://jsfiddle.net/Spokey/8hfxU/1/

---

NEW: You can for example store the price in a data-* attribute and retrieve it from there

http://jsfiddle.net/Spokey/8hfxU/2/

<div class="product_total_cost" id="price" data-val="199">199 kr</div>

And script

$('#quantity').change(function (event) {
    $('#price').html($(this).val() * parseInt($('#price').attr('data-val'), 10));
});