Si es para enviarlo a Ajax, puedes tener otra función que envíe las peticiones a Ajax, y desde dentro del on.click
recoges el formulario y se lo pasas a esa función.
Para hacer el código más fléxible, puedes dotar a cada formulario de un atributo action
donde colocarías el archivo que quieres invocar en la petición Ajax y un atributo method
. Luego usas prop
del objeto formulario para saber a qué archivo debe enviarse según el formulario que sea.
La función que haría la petición Ajax sería más o menos:
function enviarAjax(frm)
{
var data=frm.serialize();
var request = $.ajax
({
url: frm.prop('action'), //Lo toma del form
method: frm.prop('method'), //Lo toma del form
data: data,
dataType: 'html' //o 'json' ...
});
request.done(function( msg )
{
console.log(msg);
return msg; //En caso de que sea necesario manejar los reusltados
});
request.fail(function( jqXHR, textStatus )
{
alert( 'Error en la petición: ' + textStatus );
var msg={error: textStatus};
return msg;
});
}
Y el código del on.click
sería casi igual, sólo incluiría la llamada a este método:
$('button').on('click', function(e) {
e.preventDefault();
var frm = $(this).closest('form');
var data = enviarAjax(frm); //Aquí se recibe data desde el return de la función
console.log(data);
alert('Enviaste el formulario con id: '+frm.prop('id'));
});
Nota: Todo el código debería ir dentro de un bloque $(function() { ... });