Procesar formulario en ajax

Esta es la primera vez que ocupo un foro así que disculpen mi torpeza pero tengo una severa duda acerca de ajax y la verdad no tengo casi nada de conocimientos de esta área. Ok, el problema es que deseo que dentro de una pagina pueda enviar dos formularios utilizando ajax, ahora me es posible enviar uno de ellos gracias a esta página http://www.miguelmanchego.com/2009/ajax-enviar-formularios-sin-recargar-jquery/ pero cuando intento enviar otro hay interferencia por que en el código ajax:

Código :

$(document).ready(function() {
    $().ajaxStart(function() {
        $('#loading').show();
        $('#result').hide();
    }).ajaxStop(function() {
        $('#loading').hide();
        $('#result').fadeIn('slow');
    });
    $('#form, #fat, #fo3').submit(function() {
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
            success: function(data) {
                $('#result').html(data);

            }
        });
        
        return false;
    }); 
})

se refiere a cargar el resultado en el div result. Lo que necesito es que el formulario 1 muestre el resultado en result y el formulario 2 en result2 para que no hayan interferencias por que cualquiera de los formularios muestra su resultado en el div result. Si no es mucho pedir les suplico me ayuden porque no se prácticamente nada de ajax. Gracias de antemano.

Hola adam_dinzel, perdon por no haber respondido antes, pero estaba de vacaciones. Bueno creo que tengo la solucion a tu problema, lo primero que hice, fue ademas del div result creé el div result1 donde se mostrara el resultado del form2. Ahora lo que tienes que hacer es colocar a form1 y form2 los id que tu quieras, pero ten cuidado de no escoger el mismo id para ambos, porque sino no va a funcionar. Bueno supongamos que form1 tiene id="form1" y form2 el id="form2", entonces modificamos el script de la siguiente manera:

Código Javascript :

$(document).ready(function() {
    $().ajaxStart(function() {
        $('#loading').show();
        $('#result').hide();
    }).ajaxStop(function() {
        $('#loading').hide();
        $('#result').fadeIn('slow');
    });
    $('#form1, #form2').submit(function() { //Aca cambié por los divs de los dos formularios
        /**************************************************************/
        /* Aca determino que div se mostrará de acuerdo con el valor  */
        /* del atributo id del formulario que lanzo el evento submit  */
        /**************************************************************/
        var contenedor = ($(this).attr('id')==='form1') ? 'result' : 'result1';
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
            success: function(data) {
                //y muestro el mensaje en el contenedor adecuado.
                $('#'+contenedor).html(data);

            }
        })
        
        return false;
    }); 
})  

Espero te sirva y me cuentes. Saludos

Pues muchísimas gracias en verdad no te imaginas lo que me ha servido tu ayuda. He notado que el efecto slow solo se aplica al div llamado result y por lo tanto no al div result1, si no es mucho pedir, abusando un poco de tus conocimientos, ¿Podrías por favor decirme como puedo incluir el efecto slow en los demás divs? También me gustaría que me aclararas si cada vez que agregue un form a la linea 9 su resultado se verá en un div llamado result pero incrementando su número al final, es decir form1=>result, form2=>result1, form3=>result2 y así sucesivamente.

Saludos.

Si tienes razon, lo del efecto "slow" es aplicable en este caso al div result solamente, para aplicarle a los demas divs deberias modificar las funciones $().ajaxStart y ajaxStop para incluir los demas divs pues si te fijas en su codigo solo se especifica el div result.
Con respecto a la segunda pregunta, no es como supones, en este caso es asi porque yo decidi llamar asi al segundo div, pero si tu quieres llamarlos de otra forma al resto de los divs tienes que usar una estructura de decision para determinar sobre cual div mostrar el resultado. A ver te lo muestro con un ejemplo:
Supongamos que form1 esta asociado con el div id=result, form2 con un div que decidiste llamar div2, form3 con un div que decidiste llamar id="divDistintoNombre", form4 con div id="otroMas", y asi sucesivamente, entonces para determinar en que div se mostrara el mensaje deberias hacer algo como lo esto:

Código Javascript :

var dondeSeMostrara; //este es la variable contenedor del codigo anterior
switch ($(this).attr('id'))
{ 
   case 'form1': dondeSeMostrara = 'result';
           break;
   case 'form2': dondeSeMostrara = 'div2';
         break;
   case 'form3': dondeSeMostrara = 'divDistinoNombre';
         break;
   default: dondeSeMostrara = 'otroMas''; //este es en caso que no sea ninguno de los otros divs
}

Saludos

Ok funciona a la perfección muchas gracias por tu ayuda, te dejo el código por si deseas comentar algo o hacer alguna sugerencia:
$(document).ready(function() {
$().ajaxStart(function() {
$('#loading').show();
$('#result').hide('slow');
}).ajaxStop(function() {
$('#loading').hide();
$('#result').fadeIn('slow');
});
$('#form1, #form2, #form3, #form4').submit(function() { //Aca cambié por los divs de los dos formularios
/**************************************************************/
/* Aca determino que div se mostrará de acuerdo con el valor */
/* del atributo id del formulario que lanzo el evento submit */
/**************************************************************/
var dondeSeMostrara; //este es la variable contenedor del codigo anterior
switch ($(this).attr('id')) {
case 'form1': dondeSeMostrara = 'result1';
break;
case 'form2': dondeSeMostrara = 'result2';
break;
case 'form3': dondeSeMostrara = 'result3';
break;
case 'form4': dondeSeMostrara = 'result4';
break;
default: dondeSeMostrara = 'result5';
};
var contenedor = ($(this).attr('id')==='form1') ? 'result' : 'result1';
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data) {
//y muestro el mensaje en el contenedor adecuado.
$('#'+dondeSeMostrara).html(data);

}
})

return false;
});
})

Saludos.