Este es mi formulario que está dentro de un bucle foreach. Quiero mostrar el producto de dos entradas, que son "qty" y "uprice", pero el único resultado que obtengo es la primera fila que ingresé.

Formulario

   <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>

Javascript


<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 Este es el código que uso para calcular la cantidad total, pero no mostró el resultado.

        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>
-1
Jiar 29 oct. 2019 a las 11:26

4 respuestas

La mejor respuesta

Cambie su código a continuación de este código. Obtendrás el resultado correcto. '$ product_id' significa su identificación de producto de su tabla de base de datos. eso se incrementa automáticamente.

Formulario

<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 ?>

Código Javascript

<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>
0
Jiar 6 nov. 2019 a las 04:58
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" >
0
Kaleemullah 4 nov. 2019 a las 07:27
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" >
0
Kaleemullah 1 nov. 2019 a las 16:05

Arreglará tu problema. Cambie el valor de entrada, obtendrá el resultado.

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()" >
0
Kaleemullah 6 nov. 2019 a las 02:54