Error en variables jQuery

[Middrel]

Buenos días,

Tengo un problema con un script de jQuery, pero no localizo el error. Les explico:

Tengo un formulario en el cuál se agregan dinámicamente campos para incluir información en un pedido:

Código HTML:

<input type="hidden" name="items[0]" id="items[0]" class="items" value="0"> 
<input type="text" name="setProducto[0]" id="setProducto[0]" class="input-type-det-e" value="" placeholder="Producto/ Servicio" >
<input type="text" name="setCantidad[0]" id="setCantidad[0]" class="cantidad input-type-det-c" value="" placeholder="Cant">
<select name="setUnidad[0]" id="setUnidad[0]" 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[0]" id="setDescuento[0]" class="desc input-type-det-c" value="0.00" placeholder="Desc">
<select name="setExento[0]" id="setExento[0]" class="exento input-type-det-d">
         <option value="Normal">Normal</option>
         <option value="Exento">Exento</option>                                        
</select>
<input type="text" name="setImporte[0]" id="setImporte[0]" class="suma input-type-det-c" value="" placeholder="P.U.">                                        
<label><a id="agregarCampo2" class="btn btn-info" href="#" title="AGREGAR">[+]</a></label> 

y con este script, calculo el importe total del pedido:

Código Javascript:

$("#calcular").click( function(e){
                
    var importes = new Array();
    var cantidad = new Array();
    var descuento = new Array();            
    var exento = new Array();                       
                
    var i = 0;
        $(".suma").each(
            function(index, value) {
                importes[i] = eval($(this).val());
                i++;            
            }
        );
    var j = 0;
        $(".cantidad").each(
            function(index, value) {
                cantidad[j] = eval($(this).val());
                j++;            
            }
        );
                
    var k = 0;
        $(".desc").each(
            function(index, value) {
                descuento[k] = eval($(this).val());
                k++;            
            }
        );
                
    var l = 0;
        $(".exento").each(
            function(index, value) {
                if($(this).val() == 'Normal') {
                    exento[l] = 1.16;
                } else {
                    exento[l] = 0;                      
                }
                l++;            
            }
        );
                
        var subtotal_pedido = 0;
        var total_pedido = 0;
        var total_iva = 0;
                
        for(i=0; i<importes.length; i++ ){
            
            importe = ((importes[i] * cantidad[i]) - descuento[i]);
            subtotal_pedido = subtotal_pedido + (((importes[i] * cantidad[i]) - descuento[i])); 
            if(exento[i] > 0) {
                iva = (importe * exento[i]) - importe;              
            } else {
                iva = 0;                
            }
            total_iva = total_iva + iva;
            }
            total_pedido = subtotal_pedido + total_iva;
            alert('Subtotal: ' + subtotal_pedido + '  Iva: ' + total_iva + ' Total: ' + total_pedido);
});
 

Funciona muy bien, sin problemas, sin embargo:

Todo el primer formulario, sirve para ingresar artículos de forma personalizada, es decir, escribes el nombre del artículo, la cantidad, el precio, etc., el siguiente formulario es para artículos previamente dados de alta en un catálogo, los cuales ya incluyen el precio y el nombre del artículo:

Código HTML:

<select name="producto[0]" id="p_0" class="articulos input-type-det-b">
         <option value="0">Producto/ Servicio</option>
         <?php while($rowSelectProductos = mysqli_fetch_array($sqlSelectProductos, MYSQLI_ASSOC)) { ?>
         <option value="<?php echo $rowSelectProductos['id_catalogo']; ?>" data-target="<?php echo $rowSelectProductos['cat_precio_unitario']; ?>">
  	 <?php echo $rowSelectProductos['cat_titulo'] . ' | $' . number_format($rowSelectProductos['cat_precio_unitario'], 2); ?>
         </option>
         <?php } mysqli_free_result($sqlSelectProductos); ?>
</select>
<input type="text" name="cantidad[0]" id="c_0" class="cantidades input-type-det-c" value="" placeholder="Cant">
<input type="text" name="descuento[0]" id="d_0" class="descuentos input-type-det-c" value="0.00" placeholder="Desc">
<select name="exento[0]" id="e_[0]" class="exentos input-type-det-d">
       	<option value="Normal">Normal</option>
       	<option value="Exento">Exento</option>                                        
</select>
<label><a id="agregarCampo" class="btn btn-info" href="#" title="AGREGAR">[+]</a></label> 

entonces, para calcular este catálogo uso la misma instrucción de jQuery arriba mencionada, obviamente sólo cambiando los nombres de las clases:

Código Javascript:

// Cálculo de factura por catálogo
$("#calcular2").click( function(e){
                
        var importes2 = new Array();
        var cantidad2 = new Array();
        var descuento2 = new Array();           
        var exento2 = new Array();                      
                
        alert("llego");
                
        var i = 0;
        $(".articulos").each(
            function(index, value) {
                importes2[i] = eval($(this).val());
                i++;    
                alert(importes2[i]);        
            }
        );
});
 

y es aquí donde vienen los problemas... por ejemplo en la función donde se obtienen los artículos (.articulos), me marca como indefinido importes2[i], no me trae los valores. Si la variable la configuro no como un arreglo si me trae esos valores, pero yo la necesito como arreglo. Y esto me sucede con los demás campos (clases cantidades, descuentos, exentos) de este formulario.

Llevo un rato tratando de identificar el porqué, pero aún no lo logro :/

Ahora, por otro lado, una vez trayendo los valores, en importes2[i] = eval($(this).val()); no me interesa obtener el valor que tiene el value del input, sino el texto que contienen los options, esto es porque ahí vienen los precios de los artículos.

Ya revisé algunos métodos en internet, pero no me funcionan cuando traigo campos dinámicamente, sólo lo obtienen si es un campo fijo.

Estos son los botones para realizar el cálculo:

Código HTML:

<input type="button" name="calcular" id="calcular" value="Calcular" >
<input type="button" name="calcular2" id="calcular2" value="Calcular" > 

No sé si me expliqué bien con todo esto, de todas formas les agradezco por sus comentarios.

Saludos!!

[codeams]

Hola, haré lo que pueda por ayudar:
1. ¿Los botones son añadidos dinámicamente?
2. ¿Qué es lo que esta saliendo mal? ¿Algún valor da cero? ¿El script se detiene? ¿Qué es lo que sucede?

Estaré al pendiente de tu respuesta.

[Middrel]

Hola codeams, gracias por responder :D

No marca ningún error, simplemente no obtiene los datos, los marca como indefinidos.

Ya localicé que estaba fallando, los i++ que coloqué estaban de más, al eliminarlos funcionó y ya trae los valores ^^

Ahora sólo me falta resolver un punto: En el siguiente select:

Código HTML:

<select name="producto[0]" id="p_0" class="articulos input-type-det-b">
         <option value="0">Producto/ Servicio</option>
         <?php while($rowSelectProductos = mysqli_fetch_array($sqlSelectProductos, MYSQLI_ASSOC)) { ?>
         <option value="<?php echo $rowSelectProductos['id_catalogo']; ?>" data-target="<?php echo $rowSelectProductos['cat_precio_unitario']; ?>">
  	 <?php echo $rowSelectProductos['cat_titulo'] . ' | $' . number_format($rowSelectProductos['cat_precio_unitario'], 2); ?>
         </option>
         <?php } mysqli_free_result($sqlSelectProductos); ?>
</select> 

Necesito, obtener el valor del option, más no del value intenté de esta forma:

Código Javascript:

var i = 0;
 $(".articulos").each(
       function(index, value) {
           importes2[i] = eval($(".articulos option:selected").text());   
           alert(importes2[i]);        
       }
);
 

pero veo que no es la opción correcta. ¿Alguna idea? Mientras sigo intentando ^^

Saludos!!

[codeams]

Por lo que entendí buscas el valor del atributo value

Código Javascript:

$('option').each(function(){
    value = $(this).attr('value'); //Esto te dirá el valor del atributo value
});
 

¿A esto te refieres?

[Middrel]

No, la del option, por ejemplo:

Yo tengo el select que muestra la información de esta forma:

Código HTML:

<option value="Aquí va un id traído de una bd">Aquí hay información acerca de ese id</option> 

literalmente sería, por citar un ejemplo:

Código HTML:

<option value="5">Memoria RAM | $850.00</option> 

Lo que necesito obtener es "Memoria RAM | $850.00".

Saudos!!

[codeams]

Asi de claro debiste ser en un principio XD
Dado que solo pones texto en los <option> no veo problema en usar html()

Código HTML:

<option>texto</option>
 

Código Javascript:

$(function(){
    h = $('option').html(), //Esto regresará el texto que buscas
    t = $('option').text(); //Esto también
    console.log(t+', '+h);
})
 

[Middrel]

Casi funcionó bien :P

Te explico que pasó:

Yo tengo el select y selecciono estos artículos, como son inputs dinámicos que añado, puedo seleccionar más de uno, posteriormente los almaceno en un arreglo para hacer el cálculo de ellos:

Código HTML:

<option value="5">Memoria RAM | $850.00</option> 
<option value="6">Disco Duro | $1,200.00</option> 

Con la función de jQuery así:

Código Javascript:

var i = 0;
$(".articulos").each(
    function(index, value) {
        importes2[i] = $('.articulos option:selected').text();
        alert(importes2[i]);
    }
);
 

me da 2 ventanas de alerta que muestran:

ventana1:
Memoria RAM | $850.00 Disco Duro | $1,200.00
ventana2
Memoria RAM | $850.00 Disco Duro | $1,200.00

Sí modifico la función y pongo html en lugar de text:

Código Javascript:

var i = 0;
$(".articulos").each(
    function(index, value) {
        importes2[i] = $('.articulos option:selected').html();
        alert(importes2[i]);
    }
);
 

ventana1:
Memoria RAM | $850.00
ventana2
Memoria RAM | $850.00

lo que me debería dar es lo siguiente:

ventana1:
Memoria RAM | $850.00
ventana2:
Disco Duro | $1,200.00

Si pongo como me comentas en tu mensaje anterior, me trae la información de todos los select del formulario, por ello hice ese pequeño cambio.

Saludos!!

[codeams]

1) Yo metería un each() dentro de otro each()

Código Javascript:

$(".articulos").each(function(){
    $(this).find('option:selected').each(function(){
        console.log($(this).html())
    })
});
 

2) No será que ese "index" debe ser "i" XD

Código Javascript:

var i = 0;
$(".articulos").each(
    function(i, value) {
        importes2[i] = $('.articulos option:selected').html();
        alert(importes2[i]);
    }
);
 

[Middrel]

Viveee!! Viveeee!!! xDDD

Funcionó con el primer método que usaste, quedando así:

Código Javascript:

$(".articulos").each( function(){
    $(this).find('option:selected').each(function() {
        importes2[i] = $(this).html();
    });
});
 

aún se me complica hacer estás "cadenas" con las funciones de JQuery, te agradezco por la ayuda ^^

Saludos y muchas gracias!! :D

[codeams]

Por nada. No te vendría mal leerte el API de jQuery.
Cuando empecé con jQuery ni me imaginaba lo poderoso que podía llegar a ser.

Saludos y exito con tu proyecto.