Javascript Array Multiple

Question

I have an issue regarding javascript and arrays. Below is my html site

<?php for ($x = 1; $x <= $_SESSION['qty_voucher']; $x++) { ?>

<td>Qty</td>
<td>
  <input type="number" step = "any" class="form-control" id="voucherqty[]" name="voucherqty[]"  onkeyup="calc()"   />
</td>
<td>Amount</td>
<td>
  <input type="number" step = "any" class="form-control" id="voucheramount[]" name="voucheramount[]" onkeyup="calc()"  />
</td>
<td>Total</td>
<td>
  <input type="number" step = "any" class="form-control" id="vouchertotal[]" name="vouchertotal[]" />
</td>

<?php } ?>

and these are the javascript i'm trying to do it

function calc() {
  var table = document.getElementById("tablenum");
  var rowCount = table.rows.length;

  for (var i = 0; i < rowCount; i++) {
    var totalNum = parseFloat(document.getElementById("voucherqty[]").value) * parseFloat(document.getElementById("voucheramount[]").value);
    document.getElementById('vouchertotal[' + i + ']').value = totalNum;
  }
}

my objective is to loop through the input field and Qty * Amount = Total for each of the array row.

I believe I'm missing out something but I dont know what it is. Thanks!

WladimirStroganov · Accepted Answer · 2017-10-25 07:40:19Z

2

Also possible a shorter solution:

function calc() {
   var table = document.getElementById("tablenum");

   for(var i = 0; i < table.rows.length; i++) {
      var inputs = table.rows[i].getElementsByTagName("input");

      // + parses input value to a number(does not matter if float or integer)
      var sum = +inputs[0].value * +inputs[1].value;

      inputs[2].value = sum;
   }  
}

answered Oct 25, 2017 at 7:40

WladimirStroganov

1761 silver badge6 bronze badges

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

2 Comments

HughL Over a year ago

Thank you so much! You are a life saver!

WladimirStroganov Over a year ago

@HughL I'm glad I could help

Mehravish Temkar · Accepted Answer · 2017-10-25 07:36:01Z

0

Try this :

<?php for ($x = 1; $x <= $_SESSION['qty_voucher']; $x++) { ?>
    <td>Qty</td>
    <td>
        <input type="number" step = "any" class="form-control" id="voucherqty[<?php echo $x; ?>]" name="voucherqty[]"  onkeyup="calc()"   />
    </td>
    <td>Amount</td>
    <td>
        <input type="number" step = "any" class="form-control" id="voucheramount[<?php echo $x; ?>]" name="voucheramount[]" onkeyup="calc()"  />
    </td>
    <td>Total</td>
    <td>
        <input type="number" step = "any" class="form-control" id="vouchertotal[<?php echo $x; ?>]" name="vouchertotal[]" />
    </td>
<?php } ?>

function calc() {
    var table = document.getElementById("tablenum");
    var rowCount = table.rows.length;

    for (var i = 1; i <= rowCount; i++) 
    {
        var totalNum = parseFloat(document.getElementById("voucherqty["+ i +"]").value) * parseFloat(document.getElementById("voucheramount["+ i +"]").value);
        document.getElementById('vouchertotal[' + i + ']').value = totalNum;
    }
}

edited Oct 25, 2017 at 7:36

answered Oct 25, 2017 at 7:24

Mehravish Temkar

4,3653 gold badges30 silver badges47 bronze badges

2 Comments

dhilt Over a year ago

@hughl This is right answer and it should be accepted

HughL Over a year ago

hey guys, i tried this method but still failed. But WladimirStroganov's solution is what I'm looking for. Anyway, Thanks for the help! Much Appreciated!

Collectives™ on Stack Overflow

Javascript Array Multiple

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related