Ola, estoy intentando hacer ciertos cálculos con inputs dinámicos en javascript, anteriormente alguien de aquí me ayudó con un problema similar, espero me puedan ayudar con este:
Tengo el siguiente HTML:
<div class="ing_guiGrid col6">
<p>
<label for="id_observa">Observaciones:</label>
<textarea name="observa[]" cols="40" rows="10" maxlength="500" required="required" id="id_observa_0"></textarea>
</p>
<p>
<label for="id_tipo_envio">Envio:</label>
<input type="number" name="tipo_envio[]" required="required" id="id_tipo_envio_0" class="tipo_envio">
</p>
<p>
<label for="id_descripcion">Descripcion:</label>
<input type="text" name="descripcion[]" maxlength="150" required="required" id="id_descripcion_0" class="descripcion">
</p>
<p>
<label for="id_cantidad">Cantidad:</label>
<input type="number" name="cantidad[]" min="0" value="0" required="required" id="id_cantidad_0" class="cantidad">
</p>
<p>
<label for="id_peso">Peso:</label>
<input type="number" name="peso[]" min="0" value="0" step="any" required="required" id="id_peso_0" class="peso">
</p>
<p>
<label for="id_precio">Tarifa:</label>
<input type="number" name="precio[]" min="0" value="0" step="any" required="required" id="id_precio_0" class="precio">
</p>
</div>
<div id="newRow"></div>
<div>
<button id="addRow" type="button" class="btn btn-info"><i class="fas fa-plus">agregar</i></button>
</div>
<div class="ing_guiGrid col3 anim hide">
<p>
<label for="id_observa">No. Boleta Contra Entrega:</label>
<input type="text" name="boleta_cte" cols="40" rows="10" maxlength="500" id="id_boleta_cte">
</p>
<p>
<label for="id_tipo_envio">Valor Total Envio:</label>
<input type="text" name="ptpae" id="id_ptpae">
</p>
<p>
<label for="id_descripcion">Comision:</label>
<input type="text" name="comision" maxlength="150" id="id_comision">
</p>
</div>
<div class="ing_guiGrid col1 alt1">
<p>
<label for="descuento">Descuento</label>
<input type="number" class="form-control" min="0" name="descuento" value="0.00" id="id_descuento">
</p>
<p>
<label for="sub_total">Sub Total</label>
<input type="number" title="No puedes modificar este campo" class="form-control" name="sub_total" id="id_sub_total" placeholder="Sub Total" value="0.00" readonly>
</p>
<p>
<label for="total">Total</label>
<input type="number" title="No puedes modificar este campo" class="form-control" name="total" id="id_total" placeholder="Total" value="0.00" readonly>
</p>
</div>
Éste lo único que hace es mostrarme los input
al entrar a la página. Se mira así:
Y Tengo la siguiente función:
var contador = 0
$("#addRow").click(function () {
contador++
var html = '';
html += `<div class="ing_guiGrid col6">
<p><button id="removeRow" type="button" class="btn btn-danger"><i class="fas fa-times-circle">eliminar</i></button></p>
<p><input type="number" name="tipo_envio[]" required="required" id="id_tipo_envio_` + contador + `" class="tipo_envio"></p>
<p><input type="text" name="descripcion[]" maxlength="150" required="required" id="id_descripcion_` + contador + `" class="descripcion"></p>
<p><input type="number" name="cantidad[]" min="0" value="0" required="required" id="id_cantidad_` + contador + `" class="cantidad"></p>
<p><input type="number" name="peso[]" min="0" value="0" step="any" required="required" id="id_peso_` + contador + `" class="peso"></p>
<p><input type="number" name="precio[]" min="0" value="0" step="any" required="required" id="id_precio_` + contador + `" class="precio"></p>
</div>`;
$('#newRow').append(html);
var a = document.querySelectorAll(".tipo_envio")
a.forEach(function(e){
e.addEventListener('change', function(){
buscarProducto(e.id)
})
})
});
// remove row
$(document).on('click', '#removeRow', function () {
$(this).closest('.ing_guiGrid').remove();
// contador--
});
Lo que hace es crear una fila de input
para hacer ciertos cálculos. La función que realiza estos cálculos es la siguiente:
function calcular_detalle(){
var cant = $("#id_cantidad_0").val();
var prec =$('#id_precio_0').val();
var desc = $('#id_descuento_0').val();
var vte = $('#id_ptpae_0').val();
var comi = $('#id_comision_0').val();
var res = vte * 0.05;
var stotal = cant * prec;
var total = stotal - desc;
$('#id_sub_total').val(stotal);
$('#id_total').val(total);
}
Esta lo que calcula es la cantidad que haya escrito el usuario en #id_cantidad_0
y lo multiplica con la cantidad de #id_precio_0
y lo muestra en en el subtotal.
Luego si el usuario quisiese (los datos de estos inputs quedan a disposición del usuario ya que puede ignorarlos o puede llenarlos) tienes los input
#id_ptpae
y #id_comision
que hacen otro cálculo, su función es la siguiente:
function calcular_comi(){
var vte = $('#id_ptpae').val();
var comi = $('#id_comision').val();
var res = vte * 0.05;
var total = $('#id_sub_total').val() - $('#id_descuento').val() + res;
$('#id_comision').val(res);
$('#id_total').val(total);
}
Escribe en el input
de total el resultado de subtotal menos el descuento que el usuario le ponga y suma la variable res
que es el 5% de la cantidad escrita en #id_ptpae
. Llamo a estas funciones de la siguiente manera:
$("#id_precio_0").change(function(){
calcular_detalle();
});
$("#id_ptpae").change(function(){
calcular_comi();
});
Y todo eso me funciona de maravilla, el problema es cuando agrego la nueva fila de input
, necesito que tenga la misma funcionalidad que la anterior, obviamente el usuario pone distintas cantidades en los nuevos input
. Lo que no puedo hacer es que los input
que se van agregando tengan la misma funcionalidad que los inputs que se muestran cuando se inicia la página, los inputs nuevos también tienen que agregar los resultados a los inputs de subtotal y total, como que sumando con el resultado de los inputs principales.
He pensado intentar con un forEach
así:
var precio = document.querySelectorAll(".precio")
precio.forEach(function(e){
e.addEventListener("change", function(){
calcular_detalle();
})
})
Pero no funciona, sé que es algo complicado y un poco abrumador, pero si alguien me pudiera ayudar estaría realmente agradecido.