Sumar inputs dinamico en jquery

[anthony_farias]

Hola buenas noches, les escribo a ver si me pueden ayudar porque tengo un problema desde hace varios dias que no he podido solucionar...estoy haciendo un sistema de facturacion donde agrego filas de 4 inputs dinamicamente hasta 10 filas. Los inputs que ingreso son Producto, cantidad, precio y subtotal, cuando agrego una fila de inputs el usuario debe llenarlos, la cantidad se multiplica por el precio y el resultado se refleja en subtotal, a la primera fila todo perfecto, cuando agrego la segunda fila hace tambien la suma perfecto, pero cuando me regreso a la primera para cambiar algun dato porque me equivoque o X razon ya no funciona la suma...y si agrego una tercera y me regreso a la segunda o a la primera tampoco funciona. Entonces si elimino la tercera fila entonces la suma de la segunda funciona y asi con todas las filas....de modo que si un usuario ingreso las 10 filas y se da cuenta que cometio un error en la primera o debe actualizar o debe eliminar las ultimas 9 que agrego...les dejo mi codigo jquery

Código:

$(function() {
    var nextinput = 0;
    
    $("#agregar").bind('click', function() {
if (nextinput <= 9){
        nextinput++;
        
        campo = "<li class='lista" + nextinput + "'><div class='desc_result'><input type='text' name='producto" + nextinput + "'></div><div class='cant_result'><input type='text' class='cantidad"+nextinput+"'  name='cantidad"+nextinput + "' ></div><div class='price_1_result'><input type='text' class='price"+nextinput+"' name='price" + nextinput + "'></div>\n\
<div class='subtotal_result'><input type='text' class='sub"+nextinput+"' disabled  name='subtotal" + nextinput + "'></div>\n\
<div class='del'><i class='icon-minus menos ' id='" + nextinput + "'></i></div></li>";
       
        $("#productos").append(campo);
        
        }else{
            return false;
        }
           
            $(".cantidad"+nextinput+" , .price"+nextinput).bind('blur', function() {
                var subtotal;
                subtotal = $(".cantidad"+nextinput).val() * $(".price"+nextinput).val();
                $(".sub"+nextinput).val(subtotal);
                //cantidad = nextinput;
                

            });        
        
        $("#" + nextinput).bind('click', function() {
            nextinput = nextinput -1;
            $(this).parents("li").remove()
            
            
        });
    });
    
});

Saludos y espero puedan ayudarme! Gracias de antemano

[Lobito14]

No estoy 100% seguro de problema, pero voy a intentar aportarte alguna solución, y a falta de respuestas... mejor que nada supongo que será.

A ver, creo que el problema está en que como creas dinamicamente los objetos con jQuery, debe haber algún problema al crear la parte que controla lo del foco de los input (el blur).

Mi solución sería intentar algo como lo siguiente (que tampoco se si va a funcionar 100%, pero te lo propongo y me cuentas):

Fuera del $("#agregar").bind('click', function() { hacer el control de la perdida del foco de cualquier input, algo del estilo:

Código Javascript:

$("input").blur(function(){
    //Acciones
});
 

Entonces, ahí dentro, donde pone opciones, pues ya realizas la acción de guardar el valor del input mediante el operador this.

Código Javascript:

$("input").blur(function(){
    subtotal = $(this).val();
});
 

Eso en teoría podría ser una solución, es lo que se me ocurre ahora mismo.

Si hay alguien que controle mas y pueda aportar una solución mejor, perfecto.

Cuéntanos que tal si lo pruebas.

Un saludo.

[anthony_farias]

Lobito muchas gracias por tomarte el tiempo de responderme, Bueno te cuento que no entendi lo que me quisiste decir pero creo que fue porque yo no explique muy bien el problema... te voy a dejar este link que te lleva directo al formulario...

[URL="http://faptechnology.com/facturacion/reciepts/addreciepts.html"]formulario [/URL]

alli veras que en la parte de abajo te dice agregar producto, intenta agregando un producto y edita el campo cantidad y el campo precio y veras ambos se multiplican y el resultado lo muestra el ultimo campo subtotal, luego agregas otro producto y te crea otra fila para agregar un producto si haces lo mismo que la primera tambien te funciona, pero si intentas editar la fila uno sin eliminar la fila 2 entonces ya no hace la operacion. Es decir la operacion la hace solo en la ultima fila agregada, si hay mas filas por delante no hace la operacion.

Creo que tu mismo viendo el programa si lo vas a entender mucho mejor.

Saludos,

Gracias de antemano.

[Lobito14]

Pues el sistema no lo puedo probar, no funciona, no hace nada al pulsar el botón de Agregar producto

Creo que estás incluyendo mal el archivo reciepts.js

Aun así, creo que te entendí bien en tu primer post, y te contesté con una solución para ese problema, si no lo has entendido podemos probar a explicártelo de otra forma, pero creo que es eso lo que pides.

Saludos.

[anthony_farias]

Ah es que tenia un problema de css, seguro lo estabas viendo con mozilla, y yo he estado desarrollando en chrome, pero ya lo arregle, si aun no se te ve, trata con chrome, y bueno, si no es mucha molestia explicame de otra forma el codigo que me ofreciste, porque te cuento que cada funcion es distinta e independiente una de otra, cuando agrego filas es distinto de cuando elimino, y la suma es distinta, lo unico en comun que puede haber es que uso la misma variable para todo. Estoy sufriendo con este codigo. :(

Saludos, y muchisimas gracias por tomarte el tiempo.

[diurno10]

antonio: te modifique un poco el archivo reciepts.js
igual deberias hacer lo mismo para el txt de precio, si es que precio lo tiene que cargar el usuario.Probalo y me avisas.

Código:

function agregaFila() {
    var nextinput = 0;
    
		alert('ddd');
    	if (nextinput <= 9){
        nextinput++;
        
        campo = "<li class='lista" + nextinput + "'><div class='desc_result'><input type='text' name='producto" + nextinput + "'></div><div class='cant_result'><input type='text' class='cantidad'  name='cantidad' /></div><div class='price_1_result'><input type='text' class='price' name='price'></div>\n\
<div class='subtotal_result'><input type='text' class='sub' disabled  name='subtotal'></div>\n\
<div class='del'><i class='icon-minus menos ' id='" + nextinput + "'></i></div></li>";
       
        $("#productos").append(campo);
        
        }else{
            return false;
        }
           
      
        $("#" + nextinput).bind('click', function() {
            nextinput = nextinput -1;
            $(this).parents("li").remove()
            
            
        });
      
}

$(document).ready(function() {

	$("#agregar").bind('click', function() {
		agregaFila();	
	});	

	$("input[name='cantidad']").live('blur', function() {
	//$("input.price").live('blur', function() {
	            var subtotal;
				var _this = $(this);
				var _precio = $(_this).parent('div').next().find('input.price').val();
				//console.log(_precio);
				var _Esubtotal = $(_this).parent('div').next().next().find('input');
				//console.log(_Esubtotal.html());
                subtotal = $(_this).val() * _precio;
                $(_Esubtotal).val(subtotal);   
     });


    $('#rif').bind('blur', function() {
        var rif = $(this).val();
        var datos = {
            rif_cedula: rif
        };

        $.ajax({
            
            url: "/reciepts/autocomplete_ajax",
            type: 'POST',
            
            data: datos,  
            //dataType: 'json',
            success: function(data) {
                if(data){
                var razon = JSON.parse(data);
                //alert(razon['nombre'])
                $("#razon").val(razon['nombre']);
                $("#direccion").val(razon['address']);
                $("#email").val(razon['email']);
                $("#telefono").val(razon['phone']);
                $(".rif_cedula").removeClass("control-group error");
    
            } else{
                
                $("#razon").val("");
                $(".rif_cedula").addClass("control-group error");
                $("#direccion").val("");
                $("#email").val("");
                $("#telefono").val("");
            }     
            }
        });
    });
});

[anthony_farias]

Diurno gracias por tomarte el tiempo de responder, Veo que modificaste muchisimo, pero hay algunas cosas que funcionan a la perfeccion y que cambiaste sin necesidad, agregar y eliminar filas funcionan perfectamente, con tu codigo no me funciono, lo unico que yo necesito es multiplicar cantidad x precio y que ese resultado se refleje en subtotal, el problema es que si agrego 5 filas por ejemplo, solo puedo hacer la cuenta en la ultima, fila agregada, si intento hacerla en filas anteriores a la ultima no hace nada. La unica forma es que elimine filas por delante y dejar la que quiere editar como si fuera la ultima.

Tambien veo que usaste live(), y esa funcion Jquery la elimino desde la version 1.4 yo estoy usando la 1.9.

Muchas Gracias por tu ayuda, un abrazo.

[Lobito14]

Estuve viendo tu web desde Chrome y no salía nada, cuando has dicho que arreglaste algo es cuando he podido visualizar, y ver que efectivamente falla.

La solución que yo te proponía es que todo lo que vas metiendo dinamicamente, son input, verdad?

Entonces te proponia utilizar una función como la siguiente:

Código Javascript:

$("input").blur(function(){
    //Acciones
});
 

Con ese código de jQuery harás que cada vez que estés en un input y salgas (ese input pierda el foco) se ejecutará las acciones que digas dentro.

¿Hasta ahí entiendes?

Entonces lo que te comentaba finalmente es que claro, esa función va a funcionar cada vez que pierda el foco CUALQUIER input, y tu quieres guardar el valor del input especifico en el que estás, entonces con la palabra this dentro de esa función anterior, vas a acceder a todas las opciones del input en concreto, entonces podrás sacar su valor, su id, clase, lo que quieras.

Espero que ahora me hayas entendido, no te he dado la solución completa, te he dicho una forma con la que creo que puedes solucionarlo, ahora queda que te machaques la cabeza pensando como sacarlo. Ya sabes, esto de la programación es así, echarle horas.

Un saludo!