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>
4 respuestas
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>
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" >
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" >
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()" >
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.