Tú puedes escuchar los clics del elemento button
en específico y dentro de él determinar mediante $(this).closest('form');
a qué formulario está ligado el botón que fue presionado.
De ese modo trabajarás con ese único formulario.
Ejemplo con tres formularios... pero pueden ser 10, o más, o menos.
$(function() {
$('button').on('click', function(e) {
e.preventDefault();
var frm = $(this).closest('form');
var data = frm.serialize(); //Almacenamos los elementos del form
console.log(data);
alert('Enviaste el formulario con id: '+frm.prop('id'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="frm1">
Escriba datos: <input type="text" name="inputTest" placeholder="Escribe algo en frm1" />
<button>Enviar frm1</button>
</form>
<hr />
<form id="frm2">
Escriba datos: <input type="text" name="inputTest" placeholder="Escribe algo en frm2" />
<button>Enviar frm2</button>
</form>
<hr />
<form id="frm3">
Escriba datos: <input type="text" name="inputTest" placeholder="Escribe algo en frm3" />
<button>Enviar frm3</button>
</form>
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() { ... });
)
que falta en tu pregunta, no?