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?

"Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results." — zero323, Sep 30 '13 at 20:07
http://stackoverflow.com/questions/1481152/jquery-how-to-detect-a-textboxs-content-has-changed Please refer the link and inside the loop calculate the price*quantity value and display it in total Input textbox — rach, Sep 30 '13 at 20:07
var price=12.50; $("#quantity").on("change",function(){ quantity=$(this).val(); total=price*quantity; $("#total").html(total_price); }) didnt work. using jquery — 2Truth, Sep 30 '13 at 20:10
Try keyup event as suggested by Sergio or try using val().$("#total").html(total_price) should be $("#total").val(total) — rach, Sep 30 '13 at 20:11

score 1 · Accepted Answer · answered Sep 30 '13 at 20:08

1

Try this:

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

Demo here

answered Sep 30 '13 at 20:08

Sergio

28,539
11
85
132

1

works perfect, how did you know what version of JQuery I was using, and how did you make it work with a smaller code? I am only a few weeks into JQuery,JSON, and Javascript – 2Truth Sep 30 '13 at 20:13
@user2807515, I just guessed I suppose :) Happy I could help! What do you mean with smaller code btw? you did not post any jQuery code... – Sergio Sep 30 '13 at 20:15
i did, you must of not seen it. yall are true geniuses. How long does it take to get all of this "down-pat"? – 2Truth Sep 30 '13 at 20:20
1

@user2807515, you are "only a few weeks into JQuery", I am a bit more. It gets faster with practise ;) – Sergio Sep 30 '13 at 20:21
1

Sergio, thanks for your help. I love this site, and the people willing to help. Great stuff. – 2Truth Sep 30 '13 at 20:24
How do you keep track of large price table..? – User57 Mar 18 '17 at 07:42
@User57 not sure of what you mean, can you explain better or post a new question with your specific scenario? – Sergio Mar 18 '17 at 07:52
I tried to mean is that the solution you provide works for single item, and if i have multiple items where i tried to change quantity in multiple place it's only changed in one place not dynamically – User57 Mar 18 '17 at 08:35
@User57 if you have several `total` to fill, just use the same logic with a `forEach` loop around, keep in mind IDs are unique, so you don't use `#total` more than once. Maybe classes or different IDs. – Sergio Mar 18 '17 at 09:08
@Sergio Can we achieve this in drop down, I mean if i have more then one drop down. – Sanjay Gohil Mar 05 '19 at 09:38
@SanjayGohil sure just use something like `$('#selectID').on('change'` instead. – Sergio Mar 05 '19 at 09:41

Changing price based on quantity

1 Answers1

Demo here