calculate the dynamic values of rate * quantity

Question

I have a PHP page displaying the results of a MySQL query. The User can change the quantity Intended input and by clicking on Get Total Button, user can see the result of Item Rate * Qty Intended. So, that total can be used for creating a voucher for the user.

Can anybody guide me on how to add this functionality to my existing page.

enter image description here

My code currently is shown below:

<?php
  include 'functions.php'; //for connection
?>
<table>
<tr>
<th>Select</font></th>
<th>Item Desc</th>
<th>Item Specification</th>
<th>Item Rate</th>
<th>Qty Intented</th>
</tr>

<?php
  $sql1 = mysql_query("SELECT * from item
            where item ='stationeries'")
  while ($row = mysql_fetch_array($sql1, MYSQL_ASSOC)) {
?>
<tr>
  <td><input type="checkbox" name="sel" /></td>
  <td><?php echo $row['item']; ?></td>
  <td><?php echo $row['specification']; ?></td>
  <td><?php echo $row['rate']; ?></td>
  <td><input type="text" name="qty" class="toAdd" id="qty" value="0.0" /></td>
  </tr>


<?php
  }
?>
</table><br />
<input type="button" value="Get Total" />
<input type="text" id="total" />

you will need to use javascript to multiply the two values and place on the 3rd element — DevZer0, Jul 31 '13 at 09:38
You want someone to guide you or to code it for you? Because this is really basic javascript... — A. Wolff, Jul 31 '13 at 09:43

Samuel Liew · Accepted Answer · 2013-07-31T10:05:46.013

Give your table and "Get Total" button an ID:

<table id="cart">

<input id="calculateTotal" type="button" value="Get Total" />

Put this script in the <head> of your page:

$(function() {
    $('#calculateTotal').click(function() {
        var total = 0;
        $('#cart tr:gt(0)').each(function() {
            total +=
                parseFloat($(this).find('td:eq(3)').text()) * 
                parseFloat($(this).find('input:last').val());
        });

        // display total in textbox
        $('#total').val(total);
    });
});

If you want to restrict users to entering whole numbers only (you can't buy a fraction of soap, for example), add this to your jQuery ready function $(function() {:

$('#cart').on('keyup', '.toAdd', function() {
    $(this).val( $(this).val().replace(/[^0-9]/, '') );
});

To format your cart total to two decimal places:

total = parseInt(total * 100) / 100;

Demo: http://jsfiddle.net/WDxej/2/

That was great help. Appreciate it. – aki2all Jul 31 '13 at 10:32 — aki2all, Jul 31 '13 at 10:32

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

I assume you want to do this calculation client side only, so using JavaScript. Since you also tagged jQuery, I will assume you have it available...

In order to do the calculation, you will need to be able to retrieve the data from the dom. to do this, you can add attributes to your HTML elements, in this case, you can probably get away with just adding classes.

<tr class="item-row">
    <td><input type="checkbox" name="sel" class="item-checkbox" /></td>
    <td><?php echo $row['item']; ?></td>
    <td><?php echo $row['specification']; ?></td>
    <td class="item-rate"><?php echo $row['rate']; ?></td>
    <td><input type="text" name="qty" class="toAdd item-qty" id="qty" value="0.0" /></td>
</tr>

now you can easily select the data you want from the dom and do you calculations:

// in button onclick handler
$('.item-row').each(function () {
    // this now references the row
    var selected = $(this).find('.item-checkbox').is(':checked');
    var rate = parseFloat($(this).find('.item-rate').html());
    var qty = parseFloat($(this).find('.item-qty').html());

    // do calculations...

});

Also, be careful when doing math in JS, especially with floats!

calculate the dynamic values of rate * quantity

2 Answers2