2

Tengo este código que me permite sumar los TextBox e imprimir los resultados en el último TextBox pero solo funciona en la primera fila.

function sum() {
    var acarreo = document.getElementById('acarreo[]').value;
    var pagocond = document.getElementById('pagocond[]').value;
    var via = document.getElementById('via[]').value;
    var peaje = document.getElementById('peaje[]').value;
    var combust = document.getElementById('combust[]').value;
    var result = parseFloat(acarreo)-( parseFloat(pagocond)+ parseFloat(via)+ parseFloat(peaje)+ parseFloat(combust));
    if (!isNaN(result)) {
        document.getElementById('txt3').value = result;
    }
}
window.onload = function() {
    sum();
}
<td><input type="text" size="5" onkeyup="sum();" name="acarreo[]" id="acarreo[]" value="<?php echo $acarreo=$row['acarreo']?>" title="ACARREO"></td>
<td><input type="text" size="5" onkeyup="sum();" name="pagocond[]" id="pagocond[]" value="<?php echo $pagocond=$row['pagocond']?>" title="PAGO DE CONDUCTOR"></td>
<td><input type="text" size="5" onkeyup="sum();" name="via[]"  id="via[]" value="<?php echo $via=$row['via']?>" title="VIATICO"></td>
<td><input type="text" size="5" onkeyup="sum();" name="peaje[]" id="peaje[]" value="<?php echo $peaje=$row['peaje']?>" title="PEAJE"></td>
<td><input type="text" size="5" onkeyup="sum();" name="combust[]" id="combust[]" value="<?php echo $combust=$row['combust']?>" title="COMBUSTIBLE"></td>
<td><input type="text" id="txt3"  readonly/></td>

introducir la descripción de la imagen aquí

1
  • 2
    Buenas Leonardo. En vez de poner el html con codigo PHP, pon por favor el codigo HTML generado en la pagina para poder ser incluido y usado en el snippet de codigo. Un saludo!
    – lois6b
    Commented el 19 mar. 2019 a las 7:46

1 respuesta 1

4

Solo funciona para el primero porque estas seleccionando por Id un unico elemento en cada caso, lo cual es el primer elemento que encuentra con ese ID. Tambien remarcar, que los IDs deberian ser unicos y no repetirse.

function sum(e) {

    const tr = e.path[2]; // Accedemos a la fila de la tabla. El valor 2 debera ser cambiado dependiendo de la posicion del elemento tr en el objeto path.

    let total = 0; // contador

    tr.querySelectorAll('input[type=text]:not(.txt3)').forEach(el => {
        if (isNaN(parseFloat(el.value))) return;
        total += parseFloat(el.value);
    }); // Sumamos el value de todos los inputs de entrada de la fila

    tr.querySelector('.txt3').value = total; // Grabamos el valor total en el input de salida de la fila
}

window.onload = function () {
    document.querySelectorAll('input:not(.txt3)').forEach(el => {
      el.addEventListener('input', sum);
    }); // Añadimos el evento sum a todos los inputs salvo el de salida
}

En cuanto al PHP que nos enseñas, deberías modificar los ID's para que sean únicos.

    <td><input type="text" size="5" name="acarreo[]" value="<?php echo $acarreo=$row['acarreo']?>" title="ACARREO"></td>
    <td><input type="text" size="5" name="pagocond[]" value="<?php echo $pagocond=$row['pagocond']?>" title="PAGO DE CONDUCTOR"></td>
    <td><input type="text" size="5" name="via[]" value="<?php echo $via=$row['via']?>" title="VIATICO"></td>
    <td><input type="text" size="5" name="peaje[]" value="<?php echo $peaje=$row['peaje']?>" title="PEAJE"></td>
    <td><input type="text" size="5" name="combust[]" value="<?php echo $combust=$row['combust']?>" title="COMBUSTIBLE"></td>
    <td><input type="text" class="txt3"  readonly/>
<?php 
    echo array_reduce($row, function ($v, $w) { 
        $v += $w;
        return $v;
    }); 
?></td>

Aquí te dejo el código para que veas el funcionamiento: prueba

Y aquí el código adaptándose más a lo que pides: prueba

1
  • 1
    Los comentarios no deben usarse para discusiones extendidas; esta conversación ha sido trasladada a un chat.
    – Alvaro Montoro
    Commented el 21 mar. 2019 a las 16:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.