how do I multiply two variables in javascript if my form is in a for each loop?

Question

This is my form which is inside a foreach loop I want to display the product of two input which is the "qty" and "uprice" but the only result I get is the first row I inputed.

Form

   <tbody>
    <?php foreach($_POST['porder'] as $porder): ?>
     <tr>
      <td>
            <input type="text" id="itemnum" name="itemnum" max=999 class="form-control form-control-line">
      </td>
      <td>
            <?php echo $porder ; ?>
      </td>
      <td>
            <input style="text-transform:uppercase"  type="text" id="rev" name="rev" class="form-control form-control-line" required>
      </td>
      <td>
            <input  style="text-transform:uppercase" type="text" id="desc" name="desc" class="form-control form-control-line" required>
      </td>
      <td>
            <input type="number" id="qty<?=$porder?>" name="qty[]" min="1" class="form-control form-control-line" onkeyup="compute('<?=$porder?>')" required>
      </td>
      <td>
            <input type="number" id="uprice<?=$porder?>" name="uprice[]" min="1" class="form-control form-control-line" onkeyup="compute('<?=$porder?>')" required>
      </td>
      <td>
            <input type="number" id="amount<?=$porder?>" name="amount[]" onkeyup="stotal('<?=$porder?>')" class="form-control form-control-line" >
      </td>
      </tr>

<?php endforeach ?>
<tr>
    <td colspan="5" ></td>  
    <td><strong>Total
    </td>
    <td>
    <input type="number" id="total" name="total"  class="form-control">
    </td>
</tr>

---

Java Script

---

<script>
    function compute() {
      var txtFirstNumberValue = document.getElementById('qty').value;
      var txtSecondNumberValue = document.getElementById('uprice').value;
      var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue);
      if (!isNaN(result)) {
        document.getElementById('amount').value = result;
  }
}
</script>

---

Total this is the code I use to compute the total amount but it didn't show the result.

        var amount = document.getElementsByName('amount[]').value;
        var sum = 0;
        for (var i = 0; i <amount.length; i++) {
        var input_value=amount[i];
        sum +=parseInt(input_value.value);
        document.getElementById('total').value = sum;

    }
</script>

Answer 1

Change your code to below this code. You will get the correct result. '$product_id' means your product id from your database table. that is auto incremented.

Form

<tbody>
    <?php foreach($_POST['porder'] as $porder): ?>
     <tr>
      <td>
            <input type="text" id="itemnum" name="itemnum" max=999 class="form-control form-control-line">
      </td>
      <td>
            <?php echo $porder ; ?>
      </td>
      <td>
            <input style="text-transform:uppercase"  type="text" id="rev" name="rev" class="form-control form-control-line" required>
      </td>
      <td>
            <input  style="text-transform:uppercase" type="text" id="desc" name="desc" class="form-control form-control-line" required>
      </td>
      <td>
            <input type="number" id="qty<?=$product_id?>" name="qty" min="1"  class="form-control form-control-line" onkeyup="compute(<?=$product_id?>)" required>
      </td>
      <td>
            <input type="number" id="uprice<?=$product_id?>" name="uprice" min="1" class="form-control form-control-line" onkeyup="compute(<?=$product_id?>)" required>
      </td>
      <td>
            <output type="number" id="amount<?=$product_id?>" name="amount" class="form-control form-control-line" >
      </td>
      </tr>

<?php endforeach ?>

Javascript Code

<script>
    function compute(id) {
      var txtFirstNumberValue = document.getElementById('qty'+id).value;
      var txtSecondNumberValue = document.getElementById('uprice'+id).value;
      var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue);
      if (!isNaN(result)) {
        document.getElementById('amount'+id).value = result;
  }
}
</script>

Answer 2

 var qty = document.getElementsByName('qty[]'); for (var i = 0; i <qty.length; i++) { var input_value=qty[i]; alert("First Index of Array: qty["+i+"].value= "+input_value.value); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input name="qty[]" id="qty1" type="number" value="1"> <input name="qty[]" id="qty2" type="number" value="3" > <input name="qty[]" id="qty3" type="number" value="4" >

Answer 3

 var qty = document.getElementsByName('qty[]'); var sum = 0; for (var i = 0; i <qty.length; i++) { var input_value=qty[i]; alert("First Index of Array: qty["+i+"].value= "+input_value.value); sum +=parseInt(input_value.value); } alert("Sum is "+sum);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input name="qty[]" id="qty1" type="number" value="1"> <input name="qty[]" id="qty2" type="number" value="3" > <input name="qty[]" id="qty3" type="number" value="4" >

Answer 4

It will fix your problem. Change the value of input, you will get the result.

 function calc(){ var qty = document.getElementsByName('qty[]'); var sum = 0; for (var i = 0; i <qty.length; i++) { var input_value=qty[i]; // alert("First Index of Array: qty["+i+"].value= "+input_value.value); var signle_value_input = input_value.value; if(signle_value_input.length.=0) sum +=parseInt(input_value;value). } $("#sum");html("Sum is "+sum); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="sum"></div> <input name="qty[]" id="qty1" type="number" value="" onkeyup="calc()"> <input name="qty[]" id="qty2" type="number" value="" onkeyup="calc()"> <input name="qty[]" id="qty3" type="number" value="" onkeyup="calc()" >

Answer 5

This is because you will create a new table for each product and every table has the same id. The id should always be unique. You could add the index of the product from the product list to the id of the table. I don't know how to code PHP but I'm sure you'll find a way to apply the index to the ID of the table. Then you can get the table and get the inputs inside of that. Feel free to leave a comment if you didn't quite hang on