Foros del Web » Programando para Internet » Jquery »

Consulta modificar valores de campos generados con JQUERY

Estas en el tema de Consulta modificar valores de campos generados con JQUERY en el foro de Jquery en Foros del Web. Hola a todos, tengo un problemita con un script de jquery. En mi aplicacion tengo una tabla estatica que se genera al cargar la pagina ...
  #1 (permalink)  
Antiguo 20/06/2014, 18:42
 
Fecha de Ingreso: mayo-2011
Mensajes: 78
Antigüedad: 8 años, 2 meses
Puntos: 0
Información Consulta modificar valores de campos generados con JQUERY

Hola a todos, tengo un problemita con un script de jquery. En mi aplicacion tengo una tabla estatica que se genera al cargar la pagina y luego con un boton tengo la opcion de agregar filas a la tabla, esto lo hago con jquery.

El problema que tengo es que los campos que se generan con jquery, los cuales tienen nombre incrementales (name=nombre+i donde i va aumentando a medida que agrego mas filas) no puedo sumarlo, uno es cantidad y otro precio unitario, lo que quiero hacer es multiplicarlos pero el script que toma los valores no los reconoce, en cambio con las filas que se cargan al cargar la pagina no tengo problemas.

Imagino que el problema debe venir por el lado de que estos campos "dinamicos" no se cargan con la pagina sino que se generan despues al hacer click en el boton.. Como puedo hacer para poder multiplicar los valores de estas filas?

Les dejo el codigo que estoy usando:

Código:
    <script>
    $(function()
    {
        $("#txtprecio1").blur(function()
            {
            var cantidad = $("#txtcantidad1").val();
            var preciounitario = $("#txtprecio1").val();
            $("#txttotal1").val(cantidad * preciounitario);       
            });
    });
    </script>
Para generar la fila con el boton uso este script:

Código:
    <script type="text/javascript">
	
	        $(function()
		{ var i = 1;
	    $("#agregarconcepto").click(function()
			{
				i = i + 1 ;
				
                $('#filaarticulo').append("<tr><td><input type='text' name='txtcantidad"+i+"' id='txtcantidad"+i+"'></td><td><input type='text' name='txtconcepto"+i+"' id='txtconcepto"+i+"'></td><td><input type='text' name='txtmoneda"+i+"' id='txtmoneda"+i+"'></td><td><input type='text' name='txtprecio"+i+"' id='txtprecio"+i+"'></td><td><input type='text' name='txttotal"+i+"' id='txttotal"+i+"'></td></tr>");			});
		});
    </script>
Les agradezco cualquier pista que me puedan dar!! gracias!!
  #2 (permalink)  
Antiguo 21/06/2014, 12:20
 
Fecha de Ingreso: agosto-2013
Mensajes: 150
Antigüedad: 6 años
Puntos: 29
Respuesta: Consulta modificar valores de campos generados con JQUERY

Puedes probar:
Código Javascript:
Ver original
  1. $(document).ready(function() {
  2.  
  3.         $(function() {
  4.           $("#txtprecio1").blur(function() {
  5.             var cantidad = $("#txtcantidad1").val();
  6.             var preciounitario = $("#txtprecio1").val();
  7.             $("#txttotal1").val(cantidad * preciounitario);
  8.           });
  9.         });
  10.  
  11.         $(function() {
  12.           var i = 1;
  13.           $("#agregarconcepto").click(function() {
  14.             i = i + 1;
  15.             $('#filaarticulo').append("<tr><td><input type='text'class='sumar' name='txtcantidad" + i + "' id='txtcantidad" + i + "'></td><td><input type='text' name='txtconcepto" + i + "' id='txtconcepto" + i + "'></td><td><input type='text' name='txtmoneda" + i + "' id='txtmoneda" + i + "'></td><td><input type='text' name='txtprecio" + i + "' id='txtprecio" + i + "'></td><td><input type='text' name='txttotal" + i + "' id='txttotal" + i + "'></td></tr>");
  16.           });
  17.         });
  18.  
  19.         var suma=0;
  20.         $('#form1').on("change", function(e) {
  21.           $(".sumar").each(function() {
  22.             suma += parseFloat($(this).val());
  23.           });
  24.           $("#test").text(suma);
  25.         });
  26.       });
Código HTML:
Ver original
  1. <form id="form1">
  2.       <table id="filaarticulo">
  3.       </table>
  4.     </form>
  5.     <button id = "agregarconcepto">Agregar</button>
  6.     <div id="test">suma</div>
  7.   </body>
  #3 (permalink)  
Antiguo 22/06/2014, 10:31
 
Fecha de Ingreso: mayo-2011
Mensajes: 78
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: Consulta modificar valores de campos generados con JQUERY

@bathorz ya pude hacerlo, tuve que cambiar y poner

Código:
 $("#txtprecio1").live('blur', function(){
Agregando el live ya me toma los campos agregados con jquery. La duda que tengo ahora es como hacer el bucle FOR para que me haga la multiplicacion por la cantidad de filas que tenga (segun la cantidad que haya agregado dinamicamente). Tengo la variable i donde guardo la cantidad de filas que se han generado, pero con el siguiente codigo no me funciona...
Código:
    $(function()
    {
        for ( var u = 1; u < i; u++ ){
        $('#txtprecio' + u).live('blur', function()
            {
            var cantidad = $('#txtcantidad'+u).val();
            var preciounitario = $('#txtprecio'+ u).val();
            $('#txttotal'+ u).val(cantidad * preciounitario);       
            });
        }
    });
Que es lo que te parece que estoy haciendo mal? Gracias!

Última edición por lisi1986; 22/06/2014 a las 14:32
  #4 (permalink)  
Antiguo 23/06/2014, 01:39
 
Fecha de Ingreso: agosto-2013
Mensajes: 150
Antigüedad: 6 años
Puntos: 29
Respuesta: Consulta modificar valores de campos generados con JQUERY

Espero que te sirva esta prueba de cálculo:
Código Javascript:
Ver original
  1. $(document).ready(function() {
  2.         $(function() {
  3.           var i = 0;
  4.           $("#agregarconcepto").click(function() {
  5.             $('#filaarticulo').append("<tr class='fila'>\n\
  6.              <td>Cant:<input type='text' class='cant' id='cant'" + i + " name='cant" + i + "' value='' /></td>\n\
  7.              <td>Precio<input type='text' id='precio" + i + "' class='precio' name='precio" + i + "'></td>\n\
  8.              <td>Parcial<input type='text' class='suma parcial' id='parcial" + i + "' name='parcial" + i + "' value='' /></td>\n\
  9.            </tr>");
  10.             i++;
  11.           });
  12.         });
  13.  
  14.         $(document).on("change", ".precio", function(e) {
  15.           //e.preventDefault();
  16.           var total = 0;
  17.           for (var i = 0; i < $(".precio").length; i++) {
  18.             var cant = $("input:text[name=cant" + i + "]").val();
  19.             var precio = $("input:text[name=precio" + i + "]").val();
  20.             $("#parcial" + i).val(cant * precio);
  21.           }
  22.           for (var i = 0; i < $(".parcial").length; i++) {
  23.             var n = $("input:text[name=parcial" + i + "]").val();
  24.             total += parseFloat(n);
  25.           }
  26.           $("#total").html(total);
  27.         });
  28.       });
Código HTML:
Ver original
  1. <form id="form1">
  2.       <table id="filaarticulo">
  3.       </table>
  4.     </form>
  5.     <button id = "agregarconcepto">Agregar</button>
  6.     <div id="total" class="test">total</div>
  #5 (permalink)  
Antiguo 26/06/2014, 20:13
 
Fecha de Ingreso: mayo-2011
Mensajes: 78
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: Consulta modificar valores de campos generados con JQUERY

@bathorz Muchas gracias, con el codigo que me sugeriste pude hacer andar la multiplicacion en los campos generados dinamicamente, el problema lo tengo ahora con los campos que ya estan cargados en la pagina que tambien son dinamicos, los genera PHP con un while de una base de datos. Entonces tengo las primeras filas de la tabla son variables segun los registros de una base de datos y despues el usuario genera con jquery campos extra.

Los ultimos ya pudimos hacerlos andar, con tu script, ahora tengo problemas con los primeros... Y una vez que podamos multiplicar todos, tengo que enviarlos por POST a otra pagina para guardarlos en la base de datos. Si pudieras darme una mano con esto voy a estar muy agradecido!!!! Desde ya muchas gracias!!

Etiquetas: campos, generados, modificar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:22.