Foros del Web » Programando para Internet » Jquery »

Enviar múltiples formas con Jquery

Estas en el tema de Enviar múltiples formas con Jquery en el foro de Jquery en Foros del Web. Para dar de alta productos a una BD, tengo: [URL="http://vivedeletras.com/Punto2/Alta/DarAltaProducto.php"]vivedeletras.com/Punto2/Alta/DarAltaProducto.php[/URL] Uso esta función para enviar el formulario: Código: $(function(){ $('#AltaArticulos1').submit(function(){ var data = $(this).serialize(); $.post('DarAltaProducto_Procesar.php', ...
  #1 (permalink)  
Antiguo 29/04/2012, 09:03
 
Fecha de Ingreso: marzo-2010
Mensajes: 18
Antigüedad: 11 años, 6 meses
Puntos: 4
Enviar múltiples formas con Jquery

Para dar de alta productos a una BD, tengo:

[URL="http://vivedeletras.com/Punto2/Alta/DarAltaProducto.php"]vivedeletras.com/Punto2/Alta/DarAltaProducto.php[/URL]

Uso esta función para enviar el formulario:

Código:
$(function(){
    $('#AltaArticulos1').submit(function(){
        var data = $(this).serialize();

        $.post('DarAltaProducto_Procesar.php', data, function(respuesta){
            $('#AltaArticulos_Confirmacion1').find('dl').slideUp('normal', function(){
                $('#AltaArticulos_Confirmacion1').html(respuesta);
            })
        });
        
        return false;
    });
});
Cada formulario tiene un ID diferente: AltaArticulos1, AltaArticulos2, AltaArticulos3, etc...

El problema es que tengo que repetir la función para cada número de articulo, pues si pongo el mismo ID para todos los formularios, sólo manda el primero, los demás los manda como submit normal, en una página diferente

¿Hay alguna forma de modificar para no tener que repetir tanto código?

Intenté: $('#AltaArticulos1,#AltaArticulos2,#AltaArticulos3 ').submit(function()
Pero modificaba todos los formularios.

Gracias =D
  #2 (permalink)  
Antiguo 29/04/2012, 17:04
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 10 años, 6 meses
Puntos: 192
Respuesta: Enviar múltiples formas con Jquery

Parece que alguien tiene un severo caso de id-itis :P ¿Por qué tantas id's hombre?

Te recomiendo que uses una clase única para todos los formularios. Algo así como FormAltaArticulos. Lo mismo con los <div>'s: AltaArticulos_Confirmacion.

Es decir, todos tus formularios deben tener la clase FormAltaArticulos y todos esos formularios deben tener un <div> con la clase AltaArticulos_Confirmacion

Entonces sólo con esto, debería funcionar para todos los formularios:

Código Javascript:
Ver original
  1. $(function(){
  2.     $('.FormAltaArticulos').submit(function(){
  3.         var $form = $(this);
  4.         var $confirmacion = $form.find('.AltaArticulos_Confirmacion');
  5.         var data = $form.serialize();
  6.  
  7.         $.post('DarAltaProducto_Procesar.php', data, function(respuesta){
  8.             $confirmacion.find('dl').slideUp('normal', function(){
  9.                 $confirmacion.html(respuesta);
  10.             })
  11.         });
  12.        
  13.         return false;
  14.     });
  15. });

Observá también que almaceno en variables los objetos jQuery para no tener que obtenerlos en cada acción, sólo una sola vez.
__________________
nahueljose.com.ar
  #3 (permalink)  
Antiguo 30/04/2012, 01:36
 
Fecha de Ingreso: marzo-2010
Mensajes: 18
Antigüedad: 11 años, 6 meses
Puntos: 4
Respuesta: Enviar múltiples formas con Jquery

Muchas gracias Naahuel, tu respuesta me dio la clave de lo que estaba haciendo mal.

Por si a alguien más le sirve en el futuro:

Al querer poner ids tipo Forma1,Forma2,Forma3, estaba complicando mucho las cosas.
Lo que hice fue asignar a todas las formas una misma clase: "AltaArticulos", pero a cada una le asigné un ID, 1, 2, 3, 4. Al enviar la forma, pido que se obtenga el valor del ID, para usarlo para obtener el valor del div desde el cual se enviará la respuesta (<div id="AltaArticulos_Confirmacion(1, 2, 3, 4)"><dl></dl></div>), que es necesario diferenciar, pues de ser el mismo, a la hora de desplegar la respuesta se mostraría el mismo resultado en todos los divs que lo contengan.

Código PHP:
<script type="text/javascript">

$(function(){
    $(
".AltaArticulos").submit(function(){
        var 
element = $(this);
        var 
iden element.attr("id");
        var 
data = $(this).serialize();

        $.
post("DarAltaProducto_Procesar.php"data, function(respuesta){
            $(
"#AltaArticulos_Confirmacion"+iden).find('dl').slideUp('normal', function(){
                $(
"#AltaArticulos_Confirmacion"+iden).html(respuesta);
            })
        });
        
        return 
false;
    });
});

</script> 
(Realmente soy sólo un aficionado en esto, pero vaya que sí me tardé mucho en encontrar la solución)
  #4 (permalink)  
Antiguo 30/04/2012, 01:39
 
Fecha de Ingreso: marzo-2010
Mensajes: 18
Antigüedad: 11 años, 6 meses
Puntos: 4
Respuesta: Enviar múltiples formas con Jquery

Por cierto, de aquí obtuve la solución:

http://aungkyawsoemm.wordpress.com/2011/10/01/submit-multiple-forms-with-jquery-and-ajax/
  #5 (permalink)  
Antiguo 30/04/2012, 07:07
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 10 años, 6 meses
Puntos: 192
Respuesta: Enviar múltiples formas con Jquery

Está bien, pero te seguís complicando con las id's. ¿Por qué esto?

Código HTML:
Ver original
  1. <div id="AltaArticulos_Confirmacion(1, 2, 3, 4)"><dl></dl></div>

Si en lugar de eso tuvieses:

Código HTML:
Ver original
  1. <div class="AltaArticulos_Confirmacion"><dl></dl></div>

Usando el script que te puse más arriba:

Código Javascript:
Ver original
  1. $(function(){
  2.     $('.FormAltaArticulos').submit(function(){
  3.         var $form = $(this);
  4.         var $confirmacion = $form.find('.AltaArticulos_Confirmacion');
  5.         var data = $form.serialize();
  6.  
  7.         $.post('DarAltaProducto_Procesar.php', data, function(respuesta){
  8.             $confirmacion.find('dl').slideUp('normal', function(){
  9.                 $confirmacion.html(respuesta);
  10.             })
  11.         });
  12.        
  13.         return false;
  14.     });
  15. });

No habría confusión alguna sobre con cual <div> estamos tratando, pues sólo tomamos el que es hijo del form que se envió y tenemos un script un poco más eficiente.
__________________
nahueljose.com.ar

Etiquetas: formulario
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 13:59.