0

hello friends
i have a jquery function who calculate a total of form field in real time (live), the value of field is data from DB table .. it work fine i have add php loop to show all data in table but the jquery function calculate only the first line.
i would like to calculate all. he is the form

<form name="panierform" method="post" action="">
      <table width="80%" border="2">
        <?php do { ?>
          <tr>
            <td><label for="article"></label>
              <input type="text" name="article" id="article" value="<?php echo $row_Recordset1['article']; ?>">
            </td>
            <td><label for="prix"></label>
            <input name="prix" type="text" id="prix" value="<?php echo $row_Recordset1['prix']; ?>"></td>
            <td><label for="quantity"></label>
            <input name="quantity" type="number" id="quantity" value="1"></td>
            <td>
              <label for="ptotal"></label>
            <input type="text" name="ptotal" id="ptotal" value=""></td>
          </tr>
          <?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>
      </table>

for exemple if i have i have 5 data in my table the php loop will show 5 data but the ptotal field value is from jquery function it get only the first and all other are empty.
here the jquery code :

  <script type="text/javascript">
 function calculatePtotal()
    {
        var value = parseFloat($('#prix').val());
        var quantity = parseFloat($("#quantity").val());
        var shipping = parseFloat($("#shipping").val());
        var ptotal = (value * quantity);
        $("#ptotal").val(parseFloat(ptotal).toFixed(2));
    }
    $("#quantity, #shipping").change(function() {
        calculatePtotal();
    });
    calculatePtotal();
</script>
5
Contributors
31
Replies
163
Views
3 Years
Discussion Span
Last Post by chrisschristou
0

are you storing the current value outside of the function?

if not you should be passing the current value to the function everytime you call it

0

With multiple rows in the table, you must use classes, not ids to identify the various DOM elements. Ids must be unique within a given DOM.

With the ids converted to classes, calculatePtotal() will be something like this :

function calculatePtotal() {
    $("tr", "#myTable").each(function(i, row) {
        $row = $(row);
        var value = parseFloat($('.prix', $row).val());
        var quantity = parseFloat($(".quantity", $row).val());
        var shipping = parseFloat($(".shipping", $row).val());
        var ptotal = (value * quantity);
        $(".ptotal", $row).val(parseFloat(ptotal).toFixed(2));
    });
}

That will recalculate all rows within the table.

Edited by Airshow

0

i converted to class but the fonction work only if the first value of quantity change. and all ptotal get the first row total and not them real total.

<script type="text/javascript">
 function calculatePtotal()
    {
         $("tr", "#panierform").each(function(calculateptotal, row) {
        $row = $(row);
        var value = parseFloat($('.prix').val());
        var quantity = parseFloat($(".quantity").val());
        var shipping = parseFloat($(".shipping").val());
        var ptotal = (value * quantity);
        $(".ptotal").val(parseFloat(ptotal).toFixed(2));
    });
    }
    $(".quantity, .shipping").change(function() {
        calculatePtotal();
    });
    calculatePtotal();
</script>
0

That behaviour is more or less what I would expect from your code. You haven't done what I said to do. Look more carefully at my answer!

Edited by Airshow

0

nothing happen with this code all ptotal is empty

 <script type="text/javascript">
 function calculatePtotal()
    {
        $("tr", "#myTable").each(function(i, row) {
        $row = $(row);
        var value = parseFloat($('.prix', $row).val());
        var quantity = parseFloat($(".quantity", $row).val());
        var shipping = parseFloat($(".shipping", $row).val());
        var ptotal = (value * quantity);
        $(".ptotal", $row).val(parseFloat(ptotal).toFixed(2));
    });
}
    $(".quantity, .shipping").change(function() {
        calculatePtotal();
    });
    calculatePtotal();
</script>


<form name="panierform" id="panierform" method="post" action="">
      <table width="80%" border="2" id="mytable">
        <tr>
          <th scope="col">Product</th>
          <th scope="col">Price</th>
          <th scope="col">Qty</th>
          <th scope="col">Product Total</th>
        </tr>
        <?php do { ?>
          <tr>
            <td><label for="article"></label>
              <input type="text" name="article" id="article" class="article" value="<?php echo $row_Recordset1['article']; ?>">
            </td>
            <td><label for="prix"></label>
            <input name="prix" type="text" id="prix" class="prix" value="<?php echo $row_Recordset1['prix']; ?>"></td>
            <td><label for="quantity"></label>
            <input name="quantity" type="number" id="quantity" class="quantity" value="1"></td>
            <td>
              <label for="ptotal"></label>
            <input type="text" name="ptotal" id="ptotal" class="ptotal" value=""></td>
          </tr>
          <?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>
      </table>
0

Make sure that your id on the table is the same as it is in the function Airshow provided. He has myTable and your table has id mytable all lower case.

Edited by pixelsoul

0

Thanks Pixelsoul, I was about to suggest a fiddle.

And yes, changing mytable to myTable should fix it.

Edited by Airshow

0

hey it work thank you, table id should be width.
i i have 5 ptotal how can calculate the total of ptota
totalofptotal= ptotal+ptotal???? 5 time???
sometime maybe i will have more than 5 in table

0

Inside calculatePtotal() :

  • declare var totalofptotal = 0; before the .each loop.
  • accumulate totalofptotal inside the loop
  • display the accumulated totalofptotal after the loop.

This will handle any number of rows.

0

i don't understund when you say accumulate, and i tried this cod but din't work

function calculatePtotal() {
    var totalofptotal= 0;
    $("tr", "#myTable").each(function (i, row) {
        $row = $(row);
        var value = parseFloat($('.prix', $row).val());
        var quantity = parseFloat($(".quantity", $row).val());
        var shipping = parseFloat($(".shipping", $row).val());
        var ptotal = (value * quantity);
        $(".ptotal", $row).val(parseFloat(ptotal).toFixed(2));
    });

    var totalofptotal = ( ptotal + ptotal );
        $(".totalofptotal", $row).val(parseFloat(totalofptotal).toFixed(2));
}

calculatePtotal();

$(".quantity, .shipping").change(function () {
    calculatePtotal();
});
0

explain cleary please :)
it same want get total of same var but diferent value

Edited by chrisschristou

0

It's important in an application like this to ensure that the total is the sum of the displayed, values. Consequently, you must accumulate (ie. add up) the rounded ptotals. As .toFixed() returns a string, you have to convert back to a number. This can be performed in a single expression, eg. parseFloat(ptotal.toFixed(2)).

Try :

    ...
    var totalofptotal += parseFloat(ptotal.toFixed(2));
});
$(".totalofptotal", $row).val(totalofptotal.toFixed(2));
...

Note that the second .toFixed(2) is theoretically not necessary, but it's safer to round again as javascript is prone to minor arithmetic errors. Otherwise you could end up displaying something like 10.0000000000001.

Edited by Airshow

0

Sorry, the totalofptotal field will be unique, therefore it can have an id, not a class, and the jQuery selector doesn't need the $row context :

 $("#totalofptotal").val(totalofptotal.toFixed(2));

Edited by Airshow

0

it don't work and line 9 have a problem but i can't undestund where.

   <script type="text/javascript">
function calculatePtotal() {
    $("tr", "#myTable").each(function (i, row) {
        $row = $(row);
        var value = parseFloat($('.prix', $row).val());
        var quantity = parseFloat($(".quantity", $row).val());
        var shipping = parseFloat($(".shipping", $row).val());
        var ptotal = (value * quantity);
        var totalofptotal += parseFloat( ptotal.toFixed(2));
        $(".ptotal", $row).val(parseFloat(ptotal).toFixed(2));
    });
$("#totalofptotal", $row).val(totalofptotal.toFixed(2));
}

calculatePtotal();

$(".quantity, .shipping").change(function () {
    calculatePtotal();
});
</script>
0

The problem you are having is probably due to the jQuery selector $("tr", "#myTable"), which selects all table rows inluding the header row, not just those to which the calculation applies.

This has the effect of generating NaN (not a number) in the accumulator expression, which messes up the total.

Try giving each of the relevant rows class="calc" and select them with $("tr.calc", "#myTable").

Also, fix the line which displays totalofptotal. See my "Sorry ..." post above.

0

i feel loose in desert, this what i tried to do

<form name="panierform" id="panierform" method="post" action="">
      <table id="myTable" width="80%" border="2">
        <tr>
          <th scope="col">Product</th>
          <th scope="col">Price</th>
          <th scope="col">Qty</th>
          <th scope="col">Product Total</th>
        </tr>
        <?php do { ?>
          <tr>
            <td><label for="article"></label>
              <input type="text" name="article" id="article" class="article" value="<?php echo $row_Recordset1['article']; ?>">
            </td>
            <td><label for="prix"></label>
            <input name="prix" type="text" id="prix" class="prix" class="calc" value="<?php echo $row_Recordset1['prix']; ?>"></td>
            <td><label for="quantity"></label>
            <input name="quantity" type="number" id="quantity" class="quantity" class="calc" value="1"></td>
            <td>
              <label for="ptotal"></label>
            <input type="text" name="ptotal" id="ptotal" class="ptotal" class="calc" value=""></td>
          </tr>
          <?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>
          <tr>
          <td>
              <label for="totalofptotal"></label>
            <input type="text" name="totalofptotal" id="totalofptotal" class="totalofptotal" value=""></td>
          </tr>

            <script type="text/javascript">
function calculatePtotal() {
    $("tr .calc", "#myTable").each(function (i, row) {
        $row = $(row);
        var value = parseFloat($('.prix', $row).val());
        var quantity = parseFloat($(".quantity", $row).val());
        var shipping = parseFloat($(".shipping", $row).val());
        var ptotal = (value * quantity);
        $("#totalofptotal").val(totalofptotal.toFixed(2));
        $(".ptotal", $row).val(parseFloat(ptotal).toFixed(2));
    });
$("#totalofptotal", $row).val(totalofptotal.toFixed(2));
}

calculatePtotal();

$(".quantity, .shipping").change(function () {
    calculatePtotal();
});
</script>
0

Here's the whole thing :

HTML

<form name="panierform" id="panierform" method="post" action="">
      <table id="myTable" width="80%" border="2">
        <tr>
          <th scope="col">Product</th>
          <th scope="col">Price</th>
          <th scope="col">Qty</th>
          <th scope="col">Product Total</th>
        </tr>
        <?php do { ?>
          <tr class="calc"><!-- class="calc" makes these table rows selectable separately from the header row -->
            <td><label for="article"></label>
              <input type="text" name="article" id="article" class="article" value="<?php echo $row_Recordset1['article']; ?>">
            </td>
            <td><label for="prix"></label>
            <input name="prix" type="text" id="prix" class="prix" value="<?php echo $row_Recordset1['prix']; ?>"></td>
            <td><label for="quantity"></label>
            <input name="quantity" type="number" id="quantity" class="quantity" value="1"></td>
            <td>
              <label for="ptotal"></label>
            <input type="text" name="ptotal" id="ptotal" class="ptotal" value=""></td>
          </tr>
          <?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>
          <tr>
          <td>
              <label for="totalofptotal"></label>
            <input type="text" name="totalofptotal" id="totalofptotal" value=""></td>
          </tr>

Javascript

function calculatePtotal() {
    var totalofptotal = 0;//initialise the accumulator
    $("tr.calc", "#myTable").each(function (i, row) {
        $row = $(row);
        var value = parseFloat($('.prix', $row).val());
        var quantity = parseFloat($(".quantity", $row).val());
        var shipping = parseFloat($(".shipping", $row).val());
        var ptotal = (value * quantity)toFixed(2);//calculate row total
        $(".ptotal", $row).val(ptotal);//display row total
        totalofptotal += parseFloat(ptotal);//accumulate the row totals to make a grand total
    });
    $("#totalofptotal").val(totalofptotal.toFixed(2));//display the grand total
}

calculatePtotal();
$(".quantity, .shipping").change(function () {
    calculatePtotal();
});
0

i copied whole thing but nothing happe ptotal is empty and total of ptotal is empty to

0

I missed a . in line 8 above. It should read ...

var ptotal = (value * quantity).toFixed(2);//calculate row total
0

it work but i have add some line here but only one work but the 2 others i'm sure it will be easy to fix ;) just the line 19 and 20 comment

  <script type="text/javascript">
function calculatePtotal() {
    var totalofptotal = 0;//initialise the accumulator
    var shippingtotal = 0;//initialise the accumulator
    var wholeqtty = 0;//initialise the accumulator
    var grandtotal = 0;
    $("tr.calc", "#myTable", "#panierform").each(function (i, row) {
        $row = $(row);
        var value = parseFloat($('.prix', $row).val());
        var quantity = parseFloat($(".quantity", $row).val());
        var shipping = parseFloat($(".shipping", $row).val());
        var ptotal = (value * quantity).toFixed(2);//calculate row total
        $(".ptotal", $row).val(ptotal);//display row total
        totalofptotal += parseFloat(ptotal);//accumulate the row totals to make a grand total
        wholeqtty += parseInt(quantity);
        grandtotal = parseFloat(totalofptotal + shippingtotal);
        shippingtotal = parseFloat(shipping * wholeqtty);
    });
    $("#grandtotal").val(totalofptotal.toFixed(2));//grand total show only the totalofptotal value
    $("#shippingtotal").val(shippingtotal.toFixed(2));// shipping total show NaN
    $("#wholeqtty").val(wholeqtty.toFixed(0)); wholeqtty work ;)
    $("#totalofptotal").val(totalofptotal.toFixed(2));//display the product total
}

calculatePtotal();
$(".quantity, .shipping").change(function () {
    calculatePtotal();
});

Edited by chrisschristou

0

here is in html

<label for="shipping">SHIPPING</label>
      <select name="Shipping" class="shipping" id="shipping"> Shipping
        <option  value="0" selected="selected">Shipping</option>
           <option value="0">0.00</option>
           <option value="9.80">9.85</option>
           <option value="19.60">19.80</option>
         </select>
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.