How to get values of multiple textboxes from a php loop and sum them using javascript

Question

What i want is that every row should have its summation (row1=price x quantity) as the quantity changes the sum should be changing automatically(total=row1 + row2 +row3) so as the total of all rows.As it is am only able to achieve that with first row. Test my code here https://malawiclinic.000webhostapp.com/

<form class="form-inline">
    <?php
        $sqlm="SELECT * FROM tbl_wishlist ORDER BY id DESC ";
        $resultmn=mysqli_query($db,$sqlm);
        $fcount=mysqli_num_rows($resultmn);

        if ($fcount>0) {
            $countprice=0;
            while($found = mysqli_fetch_array($resultmn)) {
                $product = $found['product'];
                $qty = $found['Quantity'];
                $price = $found['price'];
                echo "
                    <div class='form-group'>
                        <label for='exampleInputName2'>$product</label>
                        <input type='text' class='form-control' id='price'
                               value='$price'>
                    </div>
                    <div class='form-group'>
                        <input type='number' class='input-text form-control'
                               id='quantity' value='$qty'>
                    </div>
                    <label for='exampleInputName2'>$
                        <span id='result'></span>
                    </label>";
            }
        } ?>
</form>

<script type="text/javascript">
    $(document).ready(function(){

        $(document).on("input",".input-text", function(){
            var x = document.getElementById("quantity").value;
            var x1 = document.getElementById("price").value;
            var total = x1 * x;
            var totals = total.toLocaleString(undefined,
                                              {maximumFractionDigits:2});
            $("#result").html(totals);
            $("#totals").html(totals);
        });
    });
</script>

You are using the same ids for multiple elements. ids are supposed to be unique. Try to use classes instead. — GiftZwergrapper
– GiftZwergrapper, Commented Sep 18, 2019 at 15:31

N3R4ZZuRR0 · Accepted Answer · 2019-09-19 01:52:56Z

1

First of all, the id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). You have three fields with id="price", three with id="quantity" and three with id="result" which is not valid, so you should remove those id(s).

Now, you will have to access these fields using their class names by getElementsByClassName. Since, all the fields have form-control as their common class, this code below will do the job. And also replace all id="result" with class="result".

$(document).ready(function(){
  var input = document.getElementsByClassName('form-control');
  var result = document.getElementsByClassName('result');
  var total = 0;
  for(var i=0; i<input.length; i+=2){
    var product = input[i].value * input[i+1].value;
    total += product;
    product = product.toLocaleString(undefined, {maximumFractionDigits:2});
    result[i/2].innerHTML = product;
  }
  total = total.toLocaleString(undefined, {maximumFractionDigits:2});
  $("#totals").html(total);
});

edited Sep 19, 2019 at 1:52

answered Sep 18, 2019 at 15:40

N3R4ZZuRR0

2,4224 gold badges21 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

GiftZwergrapper Over a year ago

The id "result" exists multiple times too. Your code won't do the job for the result/subtotals.

Pamzey Over a year ago

@VermaJr. its working in the way that it is giving me the sum of all products but i also would like to have total of every row displaying to the right of the row is it possible?

Collectives™ on Stack Overflow

How to get values of multiple textboxes from a php loop and sum them using javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related