jQuery dynamically calculating each subTotal per row within php loop

Question

Nothing works fine. I want the subTotal field to show the calculated amount when I change the quantity. I'm relatively new to web development and programming. Thanks in advance.

HTML

    <tr>
     <td><input id="quantity" type="text" name="name" value="<?php echo $row['name'] ?>" readonly="readonly"></td>
     <td><input id="quantity-sm" type="text" name="price" class="price" value="<?php echo $row['price'] ?>" ></td>
     <td>
        <input type="button" value="-" class="qtyminus" field="quantity">
        <input type="submit" name="quantity" class="quantity" value="0" class="qty">
        <input type="button" value="+" class="qtyplus" field="quantity">
    </td>

    <td><input   id="quantity-sm" type="text" class="subTotal" name="subTotal" ></td></td>
    </tr>
    <?php endwhile; ?>
<tfoot>
    <tr><td colspan="2"></td><td align="right"><span id="total" class="total"></span> </td></tr>
</tfoot>

JQuery

$(document).ready(function(){

update_amounts();
$('.qty').change(function() {
    update_amounts();
});

});

function update_amounts()
{
    var sum = 0.0;
    $('#myTable > tbody  > tr').each(function() {
        var qty = $(this).find('.quantity').val();
        var price = $(this).find('.price').val();
        var amount = (qty*price)
        sum+=amount;
        $(this).find('.subTotal').text(''+amount);
    });

    $('.total').text(sum);
}

What has this to do with the PHP loop? And what is your problem with the code? — Teemu, Aug 03 '17 at 08:25
Your code is prone to [SQL injection](https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php) — Teh, Aug 03 '17 at 08:29
@Teh I appreciate your warning. This is my first project-based learning for web development. I have not concerned about the security yet. Thanks. — Hein Htet Zor, Aug 03 '17 at 08:55

score 0 · Answer 1 · answered Aug 03 '17 at 08:31

0

Did you put the

$('.qty').change(function() {
    calculate();
});

into the $(document).ready()callback? This makes sure the DOM is ready.

See https://learn.jquery.com/using-jquery-core/document-ready/

answered Aug 03 '17 at 08:31

capfel

1

I have edited the code. Still doesn't work. – Hein Htet Zor Aug 03 '17 at 08:53
@user43559 "Doesn't work" is not a problem description, please describe what you want your code to do, and what it does instead. – Teemu Aug 03 '17 at 08:57
@user43559 For a start, please go to your browser and press F12, this should open a dev console. Then reload your page and see if any errors are shown in this console. – capfel Aug 03 '17 at 09:07
@Teemu Sorry. For each row, I have a plus/minus buttons to change value in quantity cell. And I have a price column and the sub total column. What I want my code to do is to multiply the price and quantity and show the amount in sub total column whenever i change the quantity with plus/minus buttons. – Hein Htet Zor Aug 03 '17 at 09:09
@user43559 Couldn't you call `update_amounts()` in the code of the plus/minus buttons that changes the quantity? – Teh Aug 03 '17 at 09:12
@Teh No, i didn't, – Hein Htet Zor Aug 03 '17 at 09:21

score 0 · Accepted Answer · answered Aug 03 '17 at 09:27

.change() will only triger when the user interacts with a text input and changes its value manually.

What you need to do is bind a click event to the plus/minus buttons, and then call the code that updates the quantity.

I'm assuming that the plus/minus buttons are already working (they're already changing the value of qty field)

$('.qtyplus, .qtyminus').click(function() {
    update_amounts();
});

jQuery dynamically calculating each subTotal per row within php loop

2 Answers2