Enviar múltiples formas con Jquery

[david19mx]

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

[Naahuel]

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:

$(function(){
    $('.FormAltaArticulos').submit(function(){
        var $form = $(this);
        var $confirmacion = $form.find('.AltaArticulos_Confirmacion');
        var data = $form.serialize();
 
        $.post('DarAltaProducto_Procesar.php', data, function(respuesta){
            $confirmacion.find('dl').slideUp('normal', function(){
                $confirmacion.html(respuesta);
            })
        });
        
        return false;
    });
});
 

Observá también que almaceno en variables los objetos jQuery para no tener que obtenerlos en cada acción, sólo una sola vez.

[david19mx]

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)

[david19mx]

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

http://aungkyawsoemm.wordpress.com/2011/10/01/submit-multiple-forms-with-jquery-and-ajax/

[Naahuel]

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

Código HTML:

<div id="AltaArticulos_Confirmacion(1, 2, 3, 4)"><dl></dl></div>
 

Si en lugar de eso tuvieses:

Código HTML:

<div class="AltaArticulos_Confirmacion"><dl></dl></div>
 

Usando el script que te puse más arriba:

Código Javascript:

$(function(){
    $('.FormAltaArticulos').submit(function(){
        var $form = $(this);
        var $confirmacion = $form.find('.AltaArticulos_Confirmacion');
        var data = $form.serialize();
 
        $.post('DarAltaProducto_Procesar.php', data, function(respuesta){
            $confirmacion.find('dl').slideUp('normal', function(){
                $confirmacion.html(respuesta);
            })
        });
        
        return false;
    });
});
 

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.