0

Hola como etsan: estoy comenzando con algo de javascript/jquery y tengo el siguiente problema que resolver: tengo una tabla en la cual las filas las voy llenando con datos de productos que vienen de mi base de datos, en dicha tabla tengo uan columna con cantidad de productos y otra columna con valor del producto y lo que necesito es que al cargar la vista me traiga el valor calculado en cada fila (es decir multiplicar la cantidad de producto * el valor) y colocarlos en el input TOTAL...

Haciendo una prueba con el script que dejo a continuacion veo por consola que efectivamente me hace la suma de los 2 inputs, pero me pinta el mismo valor(el utlimo) en el input de los totales en las filas:

introducir la descripción de la imagen aquí

El script lo tengo asi hasta ahora:

<script>

//DECLARAMOS LAS VARIABLES PARA LOS CALCULOS
var subtotal = 0;
var descuento = 0;
var impuesto = 0;
var total = 0;

//LLAMAMOS A LA FUNCION QUE HACE LOS CALCULOS
valores();

function valores(){
    $('#productos tr').each(function(){

        let total_celdas_cantidad = $(this).find('input[type="number"]').val();
        let total_celdas_valores = $(this).find('input[type="text"]').val();

        var valor_total_fila = total_celdas_cantidad * total_celdas_valores;

console.log(valor_total_fila);

        $(".total_producto_tabla").val(valor_total_fila);

       // $("#total_producto_tabla").val(valor_total_fila);

       //CALCULA EL SUBTOTAL SUMANDO LOS TTOALES DE LOS PRODUCTOS COTIZADOS
       subtotal += valor_total_fila;
       $('#monto_subtotal').val(subtotal);
    });
}

</script>

y el codigo de mi vista (la parte de la tabla en concreto) es esta:

<div class="card">

            <div class="card-body">

                <div class="row">
                    <h5>Productos Solicitados en el Pedido</h5>
                </div>
                <br>
                <div class="row">
                    <table id="productos" class="table table-striped table-bordered table-condensed table-hover">
                        <thead >
                            <th style="width:25%">Producto</th>
                            <th >SKU</th>
                            <th>Cantidad Solicitada</th>
                            <th>Valor Unitario</th>
                            <th>Total</th>
                        </thead>
                        <tfoot></tfoot>
                        @foreach($detallePedido as $detalle)
                        <tr  onkeyup="valores(this)">
                            <td>{{$detalle->nombre_producto}}</td>
                            <td>{{$detalle->sku}}</td>
                            <td><input type="number" class="cantidad_producto form-control" value="{{$detalle->cantidad}}" /> </td>
                            <td><input type="text" class="valor_neto form-control" value="{{$detalle->valor_neto}}" readonly /> </td>
                                                        <td><input type="text" class="form-control total_producto_tabla" readonly></td>

                        </tr>
                    @endforeach
                    </tbody>
                    </table>
                </div>
            </div>
          </div>

</script>

Saludos a todos

1 respuesta 1

0

Puede que esto te ayude, con javascript puro.

function doc(element, type){
if(type == null){
 return document.getElementById(element);
 }else{
 return document.getElementsByClassName(element)
 }
}

var c = doc("c"); // cantidad
var v = doc("v"); // valor
var t = doc("t"); // total
const buttons = [...doc("get", 1)]; // obtengo los los botones y los transformo en array

buttons.forEach(key=>{
key.onclick = function(){
c.disabled = false;
 v.value = this.dataset.value; // obtengo el dataset del botón y lo agrego al input valor
 
  c.addEventListener("keyup", function(e){

var getValues = c.value * v.value; // obtener los valores para multiplicarlos
var value = getValues.toString().split(".")[0].replace(/\B((?=(\d{3})+(?!\d)))/g, '.');
t.value = "$"+value; // Muestro el resultado en input TOTAL
})
}
})
button{
  cursor: pointer;
}
<ul>
 <li>
 Iphone X \
 Valor: $752.201 ||
 <button class="get" data-value="1982201">Comprar</button>
 </li>
 <br>
 <li>
  Motorola g4 \
  Valor: $256.234 ||
  <button class="get" data-value="256234">Comprar</button>
 </li>
</ul>

<input id="c" type="number" placeholder="Cantidad" value="" disabled>
<input id="v" type="text" value="" placeholder="Valor" disabled>
<input id="t" type="text" value="" placeholder="TOTAL" disabled>

1
  • Después, solo obtienes todas las clases de los inputs con getElementsByClassName con su valor (value) y los sumas, al haber hecho eso, lo muestras en console.log() para ver el resultado
    – Daniel
    Commented el 11 dic. 2021 a las 21:56

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.