Lo he logrado de esta forma:
Dividiendo las diferentes partes del
form
confieldset
.Escuchando los clicks de los botones por su id.
Usando
closest('fieldset')
para recuperar solamente los datos contenidos en el fieldeset al que pertenece el botón.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>