Ver Mensaje Individual
  #1 (permalink)  
Antiguo 17/02/2014, 11:49
Avatar de Middrel
Middrel
 
Fecha de Ingreso: abril-2005
Mensajes: 835
Antigüedad: 19 años
Puntos: 27
Error al sumar inputs dinámicos

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:
Ver original
  1. /* Creamos más inputs en formulario de forma dinámica [Para detalle personalizado] */      
  2.         $("#contenedor2").hide();
  3.        
  4.         $("#activarPer").change( function() {
  5.             var option = $(this).attr("checked");
  6.             if(option){ $("#contenedor2").show(); $("#contenedor").hide(); $("#activarCat").prop("checked", false); } else { $("#contenedor2").hide(); }
  7.         });
  8.        
  9.         var contenedor2       = $("#contenedor2");
  10.         var AddButton2       = $("#agregarCampo2");
  11.  
  12.         var x = $("#contenedor2 div").length;
  13.         var FieldCount2 = x-1;
  14.        
  15.         // Con esta función agregamos los campos
  16.         $(AddButton2).click(function (e) {
  17.             FieldCount2++;
  18.            
  19.             $(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>');
  20.    
  21.    
  22.             x++;
  23.         });
  24.        
  25.        
  26.         // Con esta función eliminamos campos
  27.         $("body").on("click",".eliminar2", function(e){
  28.             if( x > 1 ) {
  29.                 $(this).parent('div').remove();
  30.                 x--;
  31.                 return FieldCount2--;
  32.             }
  33.             return false;
  34.         });

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:
Ver original
  1. var importes = new Array();
  2.            
  3. importes[FieldCount2] = document.getElementsByClassName('pu' + FieldCount2);
  4. alert(importes[FieldCount2]);

pero me regresa lo siguiente: [object Nodelist]

si lo pongo así:

Código Javascript:
Ver original
  1. var importes = new Array();
  2.            
  3. importes[FieldCount2] = parseFloat(document.getElementsByClassName('pu' + FieldCount2));
  4. alert(importes[FieldCount2]);

me regresa: NaN

y si hago esto:

Código Javascript:
Ver original
  1. var importe = $(".pu" + FieldCount2).val();
  2. 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!!