CODEWITHSUNDEEP
javascriptphp
staynjokede
staynjokede

Reputation: 97

Using JS to calculate elements in a PHP while loop

I have 2 <p> tags and an input field, wrapped in a while loop

<p id="price"></p>
<input  id="quantity"  oninput="calculate(<?php echo $cprice; ?>)" type="text" name="quantity">
<p id="total"></p>

I want to use JavaScript to perform arithmetic.

I want to multiply price and quantity and display the result in total. Without the while loop, it works but with the while loop, it only updates the first field. 

function calculate(price) {
        var quantity = document.getElementById('quantity').value;
        var result = document.getElementById('total');  
        var myResult = price * quantity;
        document.getElementById('total').innerHTML = myResult;
}

I don't know how to dynamically update the total tag with js

Upvotes: 0

Views: 223

Answers (2)

Barmar
Barmar

Reputation: 780798

IDs need to be unique. If there are duplicates, document.getElementById will return the first one.

Instead of using IDs, use DOM navigation methods. You can pass in this to get a reference to the input element, then find the output element after it.

function calculate(price, input) {
  var quantity = input.value;
  var result = input.nextElementSibling;
  var myResult = price * quantity;
  result.innerHTML = myResult;
}
<p class="price">Price = 30</p>
<input class="quantity" oninput="calculate(30, this)" type="text" name="quantity">
<p class="total"></p>

<p class="price">Price = 45</p>
<input class="quantity" oninput="calculate(45, this)" type="text" name="quantity">
<p class="total"></p>

Upvotes: 0

mplungjan
mplungjan

Reputation: 177691

You need to change your IDs to class since IDs must be unique.

See example which is assuming price is alway there

I choose to not use nextElement since you can easily add other stuff to the html without it

I also made the code unobtrusive instead of having inline handlers

document.querySelectorAll(".quantity").forEach(function() {
  this.oninput = function() {
    var q = document.querySelectorAll(".quantity"),
      p = document.querySelectorAll(".price"),
      total = 0;
    q.forEach(function(qt, index) {
      var price = +p[index].innerText,
        quantity = +qt.value;
      if (!isNaN(quantity)) total += price * quantity;
    })
    document.getElementById('total').innerHTML = total;
  }
})
<p class="price">1</p>
<input class="quantity" type="text" name="quantity">
<p class="price">2</p>
<input class="quantity" type="text" name="quantity">
<p class="price">3</p>
<input class="quantity" type="text" name="quantity"><br/>
Total:<p id="total"></p>

Upvotes: 1

Related Questions