Changing prices based on quantity where there are multiple prices in a table

Question

I'm trying to create a cart where the user selects the desired pizza and size from a table and the information is displayed in a table format inside a different area (#orderList). I want to make it so that the user can change the quantity and the item and the price changes as well. I think it has something to do with the two different prices in the same row but I'm not sure.

This is currently what I have:

HTML:

<div id="order_column">
    <h2 class="order_column_header">
        Current Order
    </h2>
    <table id="orderList">

    </table>
</div>

<div id="pizzaTableContainer" class="pizzaConatiner container overflowConatiner">
    <table class="menuTable pizza" id="pizzaTable">
        <tr>
            <th class="tableHeader" colspan="500">Standard Pizzas</th>
        </tr>
        <tr>
            <th id="pizzaHeader">Pizza</th>
            <th>Small</th>
            <th>Large</th>
        </tr>
        <tr>
            <td class="desc">Tomato & Cheese</td>
            <td id="spizza1" class="spizza orderChoice">5.50</td>
            <td id="lpizza1" class="lpizza orderChoice">9.75</td>
        </tr>
        <tr>
            <td class="desc">Onions</td>
            <td id="spizza2" class="spizza orderChoice">6.85</td>
            <td id="lpizza2" class="lpizza orderChoice">10.85</td>
        </tr>
        <tr>
            <td class="desc">Peppers</td>
            <td id="spizza3" class="spizza orderChoice">6.85</td>
            <td id="lpizza3" class="lpizza orderChoice">10.85</td>
        </tr>
        ...
        ...
        ...
    </table>
</div>

JQuery:

$('.spizza').click(function () {
    $('#orderList')
    .append($('<tr>')
    .append($('<td>').text("Small " + $(this).parent().children('.desc').text() + " " + $('#pizzaHeader').text()))
    .append($('<td class="qty">')
    .append($('<input type="number" name="quantity" min="1" class="inputField" style="width:30px">').val(1)))
    .append($('<td>').text($(this).parent().children('.spizza').text()))
    .append($('<td class="cross">').html('&#10006;')));
});

$('.lpizza').click( function() {
    $('#orderList')
    .append($('<tr>')
    .append($('<td>').text("Large " + $(this).parent().children('.desc').text() + " " + $('#pizzaHeader').text()))
    .append($('<td class="qty">')
    .append($('<input type="number" name="quantity" min="1" class="inputField" style="width:30px">').val(1)))
    .append($('<td>').text($(this).parent().children('.lpizza').text()))
    .append($('<td class="cross">').html('&#10006;')));
});


$('.inputField').on('change', function () {
    var totalCost = $(this).parent().parent().find('.orderChoice').val() * this.value;
    $('#total').attr('$', totalCost);
});

Add `.on("keyup",function() {...})` to your quantity fields and do the calculation there — mplungjan, Sep 07 '15 at 13:33
@Zl3n Like this? $('[name="quantity"]').on('keyup', function() { var totalCost = $(this).parent().parent().find('.spizza').val() * this.value; $('#total').attr('$', totalCost); }); Although I would prefer to use change instead of keyup, as I want it to deal with other input methods, rather than just keys. — Definitive, Sep 07 '15 at 13:42

mplungjan · Accepted Answer · 2015-09-07T14:56:58.603

you need to use .val() and not .attr()
You need to delegate the on keyup to the dynamic field $("#orderList").on('keyup','input[name="quantity"]', function() {
Give the price a class and use closest
you need to not use comma in total
I simplified your small and large pizza selection too.

There are more issues but those are the top ones

    $(function() {
      
        $('.apizza').click(function () {
            var size = this.id.indexOf("lpizza") !=-1?"Large":"Small";
            $('#orderList')
            .append($('<tr>')
            .append($('<td>').text(size+" " + $(this).parent().children('.desc').text() + " " + $('#pizzaHeader').text()))
            .append($('<td class="qty">')
            .append($('<input type="number" name="quantity" min="1" class="inputField" style="width:30px">').val(1)))
            .append($('<td class="price">').text($(this).text()))
            .append($('<td class="cross">').html('&#10006;')));
        });

        $("#orderList").on('keyup','input[name="quantity"]', function() { 
          var total = 0;
          $("#orderList tr").each(function() {
            var price = $(this).find(".price").text(),
                qty=$(this).find(".qty>input").val(),
                cost = price * parseInt(qty,10); 
          total += cost;  
          $('#total').text('$'+ total.toFixed(2)); 
        }); 
      }); 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="order_column">
        <h2 class="order_column_header">
            Current Order
        </h2>
        <table>
          <tbody id="orderList">
          </tbody>
          <tfooter><tr><td id="total"></td></tr></tfooter>
        </table>
    </div>

    <div id="pizzaTableContainer" class="pizzaConatiner container overflowConatiner">
        <table class="menuTable pizza" id="pizzaTable">
            <tr>
                <th class="tableHeader" colspan="500">Standard Pizzas</th>
            </tr>
            <tr>
                <th id="pizzaHeader">Pizza</th>
                <th>Small</th>
                <th>Large</th>
            </tr>
            <tr>
                <td class="desc">Tomato & Cheese</td>
                <td id="spizza1" class="apizza orderChoice">5.50</td>
                <td id="lpizza1" class="apizza orderChoice">9.75</td>
            </tr>
            <tr>
                <td class="desc">Onions</td>
                <td id="spizza2" class="apizza orderChoice">6.85</td>
                <td id="lpizza2" class="apizza orderChoice">10.85</td>
            </tr>
            <tr>
                <td class="desc">Peppers</td>
                <td id="spizza3" class="apizza orderChoice">6.85</td>
                <td id="lpizza3" class="apizza orderChoice">10.85</td>
            </tr>
        </table>
    </div>

Ok. So I've taken what you have done and it almost works. I discovered some errors with my own code, which would have caused issues when answering. $('#orderList').on('change', 'input[name="quantity"]', function () { var inputValue = parseInt(this.value); console.log(inputValue) var price = $(this).closest('tr').find('.price').text(); console.log(price) var totalItemCost = price * inputValue; console.log(totalItemCost) $(this).closest('tr').find('.price').val( totalItemCost); }); However I still can't get the table to display the updated price. — Definitive, Sep 07 '15 at 14:34
Please see update. I added a total for you. If you need to have the price for each item total to the right, I suggest you add a cell and give it class="subTotal" - then you can just loop over subtotals instead of what I did — mplungjan, Sep 07 '15 at 14:57

score 0 · Answer 2 · edited May 23 '17 at 12:23

0

Please try:

$('#orderList').on('change', '.inputField',  function () {});

Deeper explanation for this problem was already given on stackoverfow:

Jquery event handler not working on dynamic content

edited May 23 '17 at 12:23

Community

1
1

answered Sep 07 '15 at 13:50

Wojciech Szymanski

348
2
8

Changing prices based on quantity where there are multiple prices in a table

2 Answers2