Error al sumar inputs dinámicos

[Middrel]

Hola, buenos días!!

Tengo un error al querer sumar inputs que se crean dinámicamente cuando oprimes un botón (+). Les comento como funciona:

Tengo una función, que genera campos para desglozar el detalle de una factura. Al inicio aparece sólo un grupo de campos que incluyen el producto, la cantidad, la unidad y el precio unitario. A su vez tiene un botón + para agregar más registros.

Este código está combinado con Javascript y PHP y funciona correctamente. El código es el siguiente:

Código Javascript:

/* Creamos más inputs en formulario de forma dinámica [Para detalle personalizado] */       
        $("#contenedor2").hide();
        
        $("#activarPer").change( function() {
            var option = $(this).attr("checked");
            if(option){ $("#contenedor2").show(); $("#contenedor").hide(); $("#activarCat").prop("checked", false); } else { $("#contenedor2").hide(); }
        });
        
        var contenedor2       = $("#contenedor2"); 
        var AddButton2       = $("#agregarCampo2"); 
 
        var x = $("#contenedor2 div").length;
        var FieldCount2 = x-1; 
        
        // Con esta función agregamos los campos
        $(AddButton2).click(function (e) {
            FieldCount2++;
            
            $(contenedor2).append('<div><?php include("bd/query-unidades.php"); ?> <input type="hidden" name="items[' + FieldCount2 + ']" id="items[' + FieldCount2 + ']" value="' + FieldCount2 + '"> <input type="text" name="setProducto[' + FieldCount2 + ']" id="setProducto[' + FieldCount2 +']" class="input-type-det-e" value="" placeholder="Producto/ Servicio"> <input type="text" name="setCantidad[' + FieldCount2 +']" id="setCantidad' + FieldCount2 + '" class="input-type-det-c" value="" placeholder="Cant"> <select name="setUnidad[' + FieldCount2 + ']" id="setUnidad[' + FieldCount2 + ']" class="input-type-det-c" ><option value="0">Unidad</option> <?php while($rowSelectUnidades = mysqli_fetch_array($sqlSelectUnidades, MYSQLI_ASSOC)) { ?><option value="<?php echo $rowSelectUnidades['id_unidad']; ?>"><?php echo utf8_encode($rowSelectUnidades['uds_unidad']); ?></option><?php } mysqli_free_result($sqlSelectUnidades); ?></select> <input type="text" name="setDescuento[' + FieldCount2 + ']" id="setDescuento' + FieldCount2 +  ' " class="input-type-det-c" value="" placeholder="Desc"> <select name="setExento[' + FieldCount2 + ']" id="setExento[' + FieldCount2 + ']" class="input-type-det-d"><option value="Normal">Normal</option><option value="Exento">Exento</option></select> <input type="text" name="setImporte[' + FieldCount2 + ']" id="setImporte[' + FieldCount2 + ']" class="input-type-det-c pu' + FieldCount2 + '" value="" placeholder="P.U."> <a href="#" class="eliminar2" title="ELIMINAR">[-]</a></div>');
    
    
            x++; 
        });
        
        
        // Con esta función eliminamos campos
        $("body").on("click",".eliminar2", function(e){ 
            if( x > 1 ) {
                $(this).parent('div').remove(); 
                x--;
                return FieldCount2--;
            }
            return false;
        });
 

Ahora, quiero agregar una función para sumar los campos de precio unitario. He visto varios ejemplos en el foro y alrededor de internet pero no me funcionan... desconozco el porque aún :/

Intenté con esto:

Código Javascript:

var importes = new Array();
            
importes[FieldCount2] = document.getElementsByClassName('pu' + FieldCount2);
alert(importes[FieldCount2]);
 

pero me regresa lo siguiente: [object Nodelist]

si lo pongo así:

Código Javascript:

var importes = new Array();
            
importes[FieldCount2] = parseFloat(document.getElementsByClassName('pu' + FieldCount2));
alert(importes[FieldCount2]);
 

me regresa: NaN

y si hago esto:

Código Javascript:

var importe = $(".pu" + FieldCount2).val();
alert(importe);
 

Me retorna vacío.

No me interesa mucho el camino a seguir, es decir, podría ser que al oprimir un botón me haga la suma de la factura o que cada que se oprima el botón +, se vayan sumando los importes y mostrar el total al final. El problema es que no puedo atrapar esos importes.

¿Alguna idea de que es lo que estoy haciendo mal? De antemano, agradezco sus comentarios.

Saludos!!

[bathorz]

Voy a sumar los setImporte[].
Agrego class=suma.

Código HTML:

<input type="text" name="setImporte[' + FieldCount2 + ']" \n\
           id="setImporte[' + FieldCount2 + ']" \n\
           class="suma input-type-det-c pu' + FieldCount2 + '" \n\
           value="" placeholder="P.U.">
 

Código Javascript:

//sumar valores setImporte[]
  $(document).on("change", ".suma", function(e) {
    e.preventDefault();
    var suma = 0;
    $(".suma").each(function() {
      suma += parseFloat($(this).val());
    });
    $("#test").text(suma);
  });
  $(document).on("ready", inicio);
  function inicio() {
    $("#personalizar").on("click", transicion);
  }
 

Código HTML:

<div id="test">test</div>
 

[Middrel]

Interesante... funciona muy bien tu código.

Sólo tengo una duda, sé que cometía un error o no estaba usando las funciones correctas, la duda es ¿que estaba haciendo mal con los métodos que utilicé?

Te agradezco por tu ayuda bathorz!! Saludos!!

[bathorz]

Que me corrijan si me equivoco. A mi entender con:
importes[FieldCount2] = document.getElementsByClassName('pu' + FieldCount2);
Si: FieldCount2 = 0
Estás cargando por ej importes[0] con un objeto.
document.getElementsByClassName('pu' + FieldCount2) es un objeto.
Lo que necesitas es su valor (objeto.value).

Con: 'pu' + FieldCount2 --> obtienes las clases: pu1, pu2,...
De esta forma cada valor pertenece a una clase diferente.
Hay que obtener el listado de clases, sus valores y sumarlos, a mí se me complica hacerlo.

Por eso todos a una misma clase, o un mismo nombre, se arma el paquete, se recorre y se suman los valores.

NOTA: ya que vas a cargar con el peso de la librería jquery lo mejor es usarla todo lo que puedas en lugar de javascript.

[Middrel]

Suena lógico y me queda más claro.

Ahora lo que haré será obtener el importe, sumarle la cantidad, si hay descuento, descontárselo, si el producto es exento no aplicarle iva... prácticamente me pondré a jugar un rato con el código. ^^

Gracias bathorz!!