Skip to main content
se añadieron 1568 caracteres en el cuerpo
Origen Enlace
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

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() { ... });

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() { ... });

Origen Enlace
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

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>