Changing price based on quantity

Question

I have a dynamic table with products, prices, and quantity. I want to change the price when the quantity is changed. here is my XHTML table

<table>
    <caption>Checkout Time!</caption>
    <thead>
        <tr>
            <th>Item</th>
            <th>Price</th>
            <th>Quantity</th>
            <th>Total</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="4" align="right">
                <input type="button" value="Checkout!" />
            </td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td class="description">Folger's Gourmet Instant Coffee 24 count box.</td>
            <td>
                <input type="text" id="price" readonly value="12.50" class="readonly" />
            </td>
            <td>
                <input type="text" id="quantity" value="1" />
            </td>
            <td>
                <input type="text" id="total" readonly value="12.50" class="readonly" />
            </td>
        </tr>
    </tbody>
</table>

I just want to use JQuery. Can someone help?

Answer 1

Try this:

$('#quantity').on('keyup',function(){
    var tot = $('#price').val() * this.value;
    $('#total').val(tot);
});

Demo here