Suma de tabla dinamica

[linuxchucho]

Hola, tengo una tabla la cual se consulta datos de productos como costo unitario, cantidad y subtotal desde mysqli

Ejemplo consulta una venta de un producto la cual tiene costo de 10 y cantidad 1, da un subtotal de 10, la situacion es de que si yo modifico el input de cantidad a 2 quiero que me actualice con javascript el valor de subtotal a 20 y me de un total de 20


Este es mi codigo:

Código PHP:

    $RESULTADOS_CONSULTA_ACTUAL = mysqli_query($conexion,"SELECT * FROM $PV_VENTAS WHERE ID_VENTA='$COD_VENTA'");
  while($consulta_venta_ACTUAL = mysqli_fetch_array($RESULTADOS_CONSULTA_ACTUAL))
  {
       $ID_PRO=$consulta_venta_ACTUAL['ID'];
       $CODIGO_PRO_VENTA=$consulta_venta_ACTUAL['CODIGO'];
       $NOM_PRO_VENTA=$consulta_venta_ACTUAL['PRODUCTO'];
       $UMEDIDA_VENTA=$consulta_venta_ACTUAL['UMEDIDA'];
       $PRE_PRO_VENTA=$consulta_venta_ACTUAL['P_UNITARIO'];
       $CANT_VENTA=$consulta_venta_ACTUAL['CANTIDAD'];
       $SUBTOTAL_VENTA=$consulta_venta_ACTUAL['SUBTOTAL'];
echo'    
                                            <td><input class="form-control" type="text" readonly="" value="'.$CODIGO_PRO_VENTA.'" ></td>
                                            <td><input class="form-control" type="text" readonly="" value="'.$NOM_PRO_VENTA.'"></td>
                                            <td class="text-center"><input class="form-control" type="number" value="'.$PRE_PRO_VENTA.'" readonly="" id="UNITARIO"></td>
                                            <td class="text-center"><input class="form-control" type="number" name="cantidad[]" required="" value="'.$CANT_VENTA.'" id="CANTIDAD" onChange="suma(this.form)"></td>
                                            <td class="text-center"><input class="form-control importe_linea" type="number" name="subtotal[]" value="'.$SUBTOTAL_VENTA.'" readonly="" id="SUBTOTAL_CU"></td>
                                            <td class="text-center"><button onclick="confirmacion_eliminar()" class="btn btn-primary" type="button" style="background-color: rgb(223,78,78);"><i class="fa fa-trash"></i></button></td>
                                            </tr>
'; 
   

Si tienen algun codigo de ejemplo agradezco su ayuda anticipada.

[caricatos]

Hola:

En este subforo el código php no vale. Pero como respuesta, tendrás que usar el manejador de evento onchange del elemento que se puede modificar y hacer esa actualización:

onchange="subtotal.value = parseInt(precio.value) * parseInt(this.value)"...

Aunque sería algo más complejo al tratarse de un array...

Saludos

[linuxchucho]

La situación es de que en la consulta de la venta vienen como 4 o 9 productos y los mismos que al modificar la cantidad solo funciona el primer campo las subsecuentes no hace nada... (en javascript)

[tuadmin]

primero tienes que crear el escucha del EVENTO en javascript, luego, tratar de identificar el el INput de Entrada, y el de salida, para ello, cada Elemento HTML deberia ir Identificado

y con ello creo que lo mejor es que cambies un poco el HTML que te da PHP

por que el atributo ID de un elemento html debe ser UNICO ya que se considera como identificador,

bueno lo bueno es que javascript no es estricto, te dejo las funciones que necesitaria tu codigo, son funciones apra navegadores modernos, si queires adaptala para navegadores antiguos

recuerda que el "script" debe ir al final de tu tabla ,
el codigo puede contener errores de sintaxys, no hagas copy paste, solo comprende y si ay funciones no que no entiendas como funciona, GOOGLEA

Código HTML:

<script type="text/javascript">
  //creamos la funcion de Evento "input" sucesor del "change"
  function escucharInputDeCantidad(evento){
    var input_cantidad= evento.target;//necesitamos saber que Input es para Obter su PADRE = td luego el padre del padre TR , el cual contiene el resultado
    var tr = input_cantidad.parentElement.parentElement;
    var input_subtotal=tr.querySelector('#SUBTOTAL_CU');
    var input_unitario=tr.querySelector('#UNITARIO');
    
    //ahora hacemos la mutiplicacion con valores
    let variable_cantidad = ParseInt(input_cantidad.getAttribute('value'));
    //comprobamos que  sea un numero valido en la cantidad
    if(variable_cantidad<1){ return ; }
 
    let subtotal = ParseFloat(input_unitario.getAttribute('value')) * variable_cantidad;
    //El subtotal lo enviamos al INPUT correspondiente
    input_subtotal.setAttribute('value',subtotal);
    //buscamos 
    //Ahora para ejecutamos la Funcion para Calcultar el TOTAL global
    obtenerElTotal();
  }
  function obtenerElTotal(){
    var total=0;
    document.querySelectorAll('tr input#SUBTOTAL_CU').forEach(function(subtotal_input){ 
      let subtotal= ParseFloat(subtotal_input.getAttribute());
      if(subtotal>0){
        total = total + subtotal;
      }
    ;});
    alert(total);
  }
  //elegimos todos los elementos input ( name="cantidad[]") y le añadimos el EVENTO de "input" sucesor del "change"
  document.querySelectorAll('tr #CANTIDAD').forEach(function(el_input){ 
    el_input.addEventListener('input',escucharInputDeCantidad);
  ;})
</script>
 

[caricatos]

Hola:

Te había comentado que al tratarse de un array no sería tan fácil... y aprovecho para indicarte un error que tiene tu código: un atributo id debe ser único, y por el código deduzco que al menos repites el id="UNITARIO"... "CANTIDAD"...

Una posible solución es que acompañes ese id con un número (que incrementarías en cada iteración del bucle)... así Podría quedar "Cantidad_2"... entonces al modificar la cantidad, por el id podrás relacionar su respectivo precio...

Una observación: cuando llevan un juego de corchetes (por su tratamiento con php supongo), el nombre en javascript también debe llevar ese juego de corchetes, y detrás el índice... Creo que algo hay en este artículo: El abc de los formularios.

Saludos