why isn't calculated value for row being set in input for total?

Question

I have this code that doesn't work to calculate quantity * price - discount = total,

the quantity values are retrieved from a database. Why isn't the calculated total being set on the appropriate total input for the row?

<?php
$con = mysqli_connect('localhost', 'root', '', 'a.karat');
if(isset($_POST['product_id']))
{
    $prno=$_POST['prno'];
    $i=1;
    $sql = mysqli_query($con,"select * from detail_pr where prNo='$prno'");
    while ($r = mysqli_fetch_array($sql)) {

        echo 

        '<tr>
     <td><input type="checkbox" name="check[]" id="check'.$i.'"    value="'.$i.'"></td>
     <td><label for="productCode"></label>
      <input type="text" name="productCode'.$i.'" id="productCode'.$i.'" readonly value="'.$r["productCode"].'" size="12" ></td>
    <td><label for="productName"></label>
      <input type="text" name="productName'.$i.'" id="productName'.$i.'" readonly value="'.$r["productName"].'"size="35" ></td>
    <td><label for="qty"></label>
      <input type="number" onkeyup="calc(this);" name="qty'.$i.'" id="qty'.$i.'" readonly value="'.$r["qty"].'" size="8" ></td>
    <td><input type="number" onkeyup="calc(this);" name="price'.$i.'" id="price'.$i.'" size="10" min="1" max="99" onchange="calc(this);" ></td>
    <td><input type="number" onkeyup="calc(this);" name="discount'.$i.'" id="discount'.$i.'" size="10" min="0" max="99" onchange="calc(this);"></td>
    <td><input type="number" name="total'.$i.'" id="total'.$i.'" size="10" min="1" max="99" onchange="calc(this);" ></td>
  </tr>';
  $i++;
    }
}
?>


 <script>
function calc(id) {
//var row=id.parentNode.parentNode;
var quant=row.cells[4].getElementsByTagName('input')[0].value;
var price=row.cells[5].getElementsByTagName('input')[0].value;
var disc=row.cells[6].getElementsByTagName('input')[0].value;
if(disc==null || disc=='') {
 res=parseFloat(quant)*parseFloat(price);
} else {
 var res=(parseFloat(quant)*parseFloat(price))-    (parseFloat(quant)*parseFloat(price)*(parseFloat(disc)/100));
 }
row.cells[7].getElementsByTagName('input')[0].value=res;
   }
</script>

Answer 1

i See that you are using row parameter in your script and it's commented. just after function calc declaration .

Answer 2

There are only a couple changes to be made to have the calculated total placed in the final input of the row:

• remove the single-line comment operator (i.e. //) on the first line:

  function calc(id) {
      //var row = id.parentNode.parentNode;
      ^
  

  _{(Maybe this was a left-over from attempts at other ways to define row).}

• The indexes of the cells within the row variable are off by one. This is because

  JavaScript arrays are zero-indexed: the first element of an array is at index 0, and the last element is at the index equal to the value of the array's length property minus 1. ¹

  so for instance, to get the value for quant, update this line:

  var quant = row.cells[4].getElementsByTagName('input')[0].value;
  

  to this:

  var quant = row.cells[3].getElementsByTagName('input')[0].value;
  

  and similarly for the values for price and disc, as well as updating the total (i.e. row.cells[6].getElementsByTagName('input')[0].value = res;)

See these changes applied in the example below:

function calc(id) {
  var row = id.parentNode.parentNode;
  var quant = row.cells[3].getElementsByTagName('input')[0].value;
  var price = row.cells[4].getElementsByTagName('input')[0].value;
  var disc = row.cells[5].getElementsByTagName('input')[0].value;
  if (disc == null || disc == '') {
    res = parseFloat(quant) * parseFloat(price);
  } else {
    var res = (parseFloat(quant) * parseFloat(price)) - (parseFloat(quant) * parseFloat(price) * (parseFloat(disc) / 100));
  }
  row.cells[6].getElementsByTagName('input')[0].value = res;
}

<table>
  <tr>
    <td></td>
    <!--checkbox-->
    <td>Code</td>
    <td>Name</td>
    <td>Quantity</td>
    <td>Price</td>
    <td>Discount</td>
    <td>Total</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="check[]" id="check1" value="1">
    </td>
    <td>
      <label for="productCode"></label>
      <input type="text" name="productCode1" id="productCode1" readonly value="29" size="12">
    </td>
    <td>
      <label for="productName"></label>
      <input type="text" name="productName1" id="productName1" readonly value="wheel" size="35">
    </td>
    <td>
      <label for="qty"></label>
      <input type="number" onkeyup="calc(this);" name="qty1" id="qty1" readonly value="2" size="8">
    </td>
    <td>
      <input type="number" onkeyup="calc(this);" name="price1" id="price1" size="10" min="1" max="99" onchange="calc(this);">
    </td>
    <td>
      <input type="number" onkeyup="calc(this);" name="discount1" id="discount1" size="10" min="0" max="99" onchange="calc(this);">
    </td>
    <td>
      <input type="number" name="total1" id="total1" size="10" min="1" max="99" onchange="calc(this);">
    </td>
  </tr>
</table>

---

¹_{https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Accessing_array_elements}