Skip to main content
2 de 2
se añadieron 229 caracteres en el cuerpo
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

Lo he logrado de esta forma:

  1. Dividiendo las diferentes partes del form con fieldset.

  2. Escuchando los clicks de los botones por su id.

  3. Usando closest('fieldset') para recuperar solamente los datos contenidos en el fieldeset al que pertenece el botón.

  4. Pasando los datos a la función de envío del form, la cual quedaría así:

    function enviarForm(data) {
        var frm = $('#frm_crud');
        //var data = frm.serializeArray();
        console.log(data);
    
        var request = 
            $.ajax({
            url: frm.prop('action'),
            method: frm.prop('method'),
            data: data,
            dataType: 'html'
            });
    
        request.done(function(msg) {
            console.log(msg);
        });
    
        request.fail(function(jqXHR, textStatus) {
            alert('Hubo un error: ' + textStatus);
        });
    }
    

Aquí un fragmento de código, probando con un botón:

$(function() {

    $("#btnPersona").click(function(e)  {
          var data = $(this).closest('fieldset').serialize();
          console.log(data);
          e.preventDefault();
          //enviarForm(data);
  });

    $("#btnGeo").click(function(e)  {
          var data = $(this).closest('fieldset').serialize();
          console.log(data);
          e.preventDefault();
          //enviarForm(data);
  });


});   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="frm_crud" action="ok.php" method="post">

  <fieldset>
    <label for="name">Nombre:</label>
    <input id="idname" type="text" name="name">
    <label for="apellido">Apellido:</label>
    <input id="idapellido" type="text" name="apellido">
    <button id="btnPersona">Enviar Persona</button>
  </fieldset>

  <fieldset>
    <label for="ciudad">Ciudad:</label>
    <input id="idciudad" type="text" name="ciudad">
    <label for="provincia">Provincia:</label>
    <input id="idprovincia" type="text" name="provincia">
    <button id="btnGeo">Enviar Geo</button>
  </fieldset>

</form>

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