I want to calculate total amount when I change quantity

Question

I want to get total amount when I change quantity.

This script is not working in while loop: (quantity * amount = total_amount)

How can I solve this issue? Please help me to solve this issue.

function calculateTotal() {
   var totalAmt = document.addem.total.value;
   totalR = eval(totalAmt * document.addem.tb1.value);
  
   document.getElementById('total_amount').innerHTML = totalR;
}

<table>
    <tr>
        <td>Id</td>
        <td>Product</td>
        <td>Quantity</td>
        <td>Total</td>
    </tr>
    <tr>
        <?php
        $sq=mysql_query("select * from cart_sample where email='$ema'");
        while($row = mysql_fetch_array($sq))
        { ?>
            <td><?php echo $row['id']; ?></td>
            <td><?php echo $row['product']; ?></td>

            <form name="addem"  id="addem" />
                <td><input type="text" name="tb1" onkeyup="calculateTotal()" value="<?php echo $row['quantity']; ?>" /></td>
                <input type="hidden" name="total"  value="<?php echo $row['amount']; ?>" />
                <td><span id="total_amount"></span></td>
      <?php } ?>        </tr>
        </table>

My friend 1 point that needs attention: You're opening outside from the while loop, and then you close and each time you run into that rendering wrong HTML. Another point: Why are you using form like this:
? Your form components must bu inside it, you have to use something like
... components... — RPichioli, Dec 05 '16 at 13:36

Zakaria Acharki · Accepted Answer · 2016-12-09T10:04:06.367

Since you're using jquery you could avoid the inline event and give your inputs a general classes then create an event for all inputs :

<input type="text" class='quantity' name="tb1" onkeyup="calculateTotal()" value="<?php echo $row['quantity']; ?>" />
<input type="hidden" class='total' name="total"  value="<?php echo $row['amount']; ?>" />
<span class="total_amount"></span>

JS :

$('.quantity').on('input', function(){
    var form = $(this).closest('form');
    var totalAmt = parseInt(form.find('.total').val());
    var quantity = parseInt($(this).val());

    form.find('.total_amount').text(totalAmt*quantity);
})

NOTE : The form should be inside same td.

Hope this helps.

$('.quantity').on('input', function(){
  var form = $(this).closest('form');
  var totalAmt = parseInt(form.find('.total').val());
  var quantity = parseInt($(this).val());

  form.find('.total_amount').text(totalAmt*quantity);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" class='quantity' name="tb1" value="1" />
  <input type="hidden" class='total' name="total" value="10" />
  <span class="total_amount">10</span>
</form>

<form>
  <input type="text" class='quantity' name="tb1" value="2" />
  <input type="hidden" class='total' name="total" value="10" />
  <span class="total_amount">20</span>
</form>

<form>
  <input type="text" class='quantity' name="tb1" value="3" />
  <input type="hidden" class='total' name="total" value="10" />
  <span class="total_amount">30</span>
</form>

Without forms :

$('.quantity').on('input', function(){
  var parent = $(this).closest('tr');
  var totalAmt = parseInt(parent.find('.total').val());
  var quantity = parseInt($(this).val());

  parent.find('.total_amount').text(totalAmt*quantity);

  calcul_total_quatities();
})

function calcul_total_quatities()
{
  var total = 0;
  $('.total_amount').each(function(){
    total += parseInt( $(this).text() );
  })
  $('.total_all_amounts').text(total);

  post_data_to_server($('.total_amount').val(),total);
}


function post_data_to_server(total_amount,total_all_amounts)
{
  $.ajax({
    type: 'post',
    url: 'your_page.php',
    data: {
      total_amount: total_amount,
      total_all_amounts: total_all_amounts
    },
    success: function( data ) {
      //'data' represent the message back from the PHP page
      
      console.log( data );
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Id</td>
    <td>Product</td>
    <td>Quantity</td>
    <td>Total</td>
  </tr>
  <tr>
    <td>ID</td>
    <td>Product</td>
    <td>
      <input type="text" class='quantity' name="tb1" value="1" />
    </td>
    <td><input type="hidden" class='total' name="total" value="10" /></td>
    <td><span class="total_amount">10</span></td>
  </tr>
  <tr>
    <td>ID</td>
    <td>Product</td>
    <td>
      <input type="text" class='quantity' value="2" />
    </td>
    <td><input type="hidden" class='total' value="10" /></td>
    <td><span class="total_amount">20</span></td>
  </tr>
  <tr>
    <td>ID</td>
    <td>Product</td>
    <td>
      <input type="text" class='quantity' value="3" />
    </td>
    <td><input type="hidden" class='total' value="10" /></td>
    <td><span class="total_amount">30</span></td>
  </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td><span class="total_all_amounts">60</span></td>
  </tr>
</table>

I know you've a loop, what's the difference.. the loop will generate the same forms as my example here. — Zakaria Acharki, Dec 05 '16 at 14:40
I think the problem in your case come from `form` inside table as you can notice in my **NOTE**. i suggest to not use the `form`s at all, check my last snippet. — Zakaria Acharki, Dec 05 '16 at 14:54
can u help me.?if i change quantity want to get subtotal(add all total_amount, value 1+2+3) at the same time.is that possible.?pls help me. — Twinxz, Dec 06 '16 at 11:12
can u help me again.?i want this ("total_amount" , "total_all_amounts") two id in my php variable. so that i can store this value in mysql table. — Twinxz, Dec 09 '16 at 05:58
Hi man, i've added the `post_data_to_server()` function that will sent the data you want to the server side... — Zakaria Acharki, Dec 09 '16 at 09:28
sorry .can you explain little more ..because i am beginner in script. — Twinxz, Dec 09 '16 at 09:43
(Updated the code a little).. So you should take a look to [`$.ajax`](https://api.jquery.com/jquery.ajax/) it's make an http request to your server sending the parameters you pass (in my example i've passed the two parameters) then in your server side you should receive those parameter and store them in the DB if you want. take a look to **[How to pass javascript/jQuery variable to PHP using POST method](http://stackoverflow.com/questions/23583497/how-to-pass-javascript-jquery-variable-to-php-using-post-method)**. — Zakaria Acharki, Dec 09 '16 at 10:05
thanks for your comments. i get this ("total_all_amounts") id,but how can i store ("total_amount")value in correct id(value="1",value="2",value="3") when i click submit button — Twinxz, Dec 09 '16 at 11:42
You need to take a look to [How to get form input array into PHP array](http://stackoverflow.com/questions/3314567/how-to-get-form-input-array-into-php-array). — Zakaria Acharki, Dec 09 '16 at 11:46

score -1 · Answer 2 · answered Dec 05 '16 at 12:51

use jquery just add script tag at the top of your page

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

and at the bottom of page before </body>

<script type="text/javascript">

    function calculateTotal() {

        var totalAmount = 0;
        $('#addem').find('input').each(function(){
            totalAmount += parseInt($(this).val()); //convert to integer so sum can be done correctly.
        });
        $('#total_amount').html(totalAmount);   
    }

</script>

I want to calculate total amount when I change quantity

2 Answers2