1

Tengo un formulario bastante grande con varios botones para enviar peticiones diferentes al servidor vía Ajax.

Yo envío los datos a través de esta función:

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

Ahora bien, mi código no está optimizado, ya que mi formulario sirve para muchas cosas y aquí, por cada cosa yo envío todo el formulario al servidor.

Quisiera saber una posibilidad de enviar sólo parte del formulario, según la necesidad que tenga.

Nota: Necesito un solo formulario, porque en ciertas operaciones sí es útil enviar todo el formulario al servidor. Mi formulario está concebido como una especie de escritorio a través del cual yo pueda realizar varios tipos de operaciones según mis necesidades.

Voy a poner un ejemplo muy simple, a sabiendas de que el formulario es mucho más complejo:

<form id="frm_crud" action="ok.php" method="post">
  <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>
  <hr />
  <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>
</form>

Al apretar el botón Enviar Persona, quisiera enviar solamente los datos relativos a esa parte del formulario (Nombre y Apellido), sin tener que especificarlos uno por uno. Una especie de serialize segmentado. ¿Cómo podría hacerlo?

3
  • a ver lo que quieres hacer es muy costoso hacerlo por ajax y javascript, lo recomendable seria que pongas varios botones, y a cada uno un name distinto, luego generas un array de los datos que deseas filtrar a ser enviados y dependiendo del botón que pulsas cargas el array , filtras los input y luego envías, este filtrado es lo que seria un poco costoso de hacer. y lo recomendable seria que hagas funciones individuales.
    – user46896
    Commented el 8 nov. 2017 a las 16:00
  • La solución más sencilla es crear dos formularios distintos. Commented el 8 nov. 2017 a las 17:26
  • @PetrusPetrōrum son varias sub partes, he puesto dos como ejemplo, pero son muchas subpartes.
    – A. Cedano
    Commented el 8 nov. 2017 a las 18:30

4 respuestas 4

1

Te recomiendo que simplifiques y hagas un formulario para cada bloque de información que quieras enviar. Para cada formulario creas un evento que capture la pulsación de su botón y redirige el flujo a la función que ya tienes. Por ejemplo:

$("#btnPersona").on('click', function() {
    enviarForm($(this).parent()); // Aqui ya le estas enviando el objeto form
});

Y perparar la función enviarForm para esperar un formulario:

function enviarForm(form)
1

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>

4
  • usa las funciones delegadas $("#btnPersona").on('click', function() { si llegas a cambiar algo en el formulario con ajax siga funcionando...
    – user46896
    Commented el 8 nov. 2017 a las 18:32
  • ¿Cuál sería la ventaja de su uso en este caso @FranciscoNúñez? Son de las cosas que no me quedan del todo claras, cuándo usar click o cuando usar on.click. Agradecería cualquier indicación aclaratoria al respecto o algún enlace. Saludos.
    – A. Cedano
    Commented el 8 nov. 2017 a las 18:45
  • te recomendaria pasarte a on.('Evento delegado') ; ya que este mapea el DOM cada vez que se ejecuta la accion, sin embargo .click no lo hace y es por esto que si modificas algo mediante ajax, contenido, botones, es muy probable que lo nuevo agregado no te funcione correctamente o simplemente el evento listener no se ejecute.
    – user46896
    Commented el 8 nov. 2017 a las 19:08
  • este es el link de referencia bastante detallado: stackoverflow.com/a/11878976/4717133
    – user46896
    Commented el 8 nov. 2017 a las 19:08
0

Crea otro formulario que te sirva para lo que necesitas o estaras violando el principio de responsabilidad unica.

Tienes el problema de que estas utilizando un solo formulario para muchas cosas lo que indica que tu diseño va a terminar muy complejo para algo tan simple como enviar un nombre y apellido.

Ahora bien, si cuando dices que sirve para muchas cosas, como por ejemplo que requiere un auto-complete y para eso necesitas enviar el nombre/apellido/edad/etc. por separado, entonces podrias utilizar la libreria $.serializeObject() donde te convierte el form en un objeto y solo extraes la información que necesitas sin enviar lo demás:

var form = $("form").serializeObject();
    $.get("url", {name:form.nombre, lastName:form.apellido}, function(response){
            //...
    })
1
  • En realidad es una clase bastante compleja... he puesto lo de Nombre y Apellido para que se entienda mejor. El formulario representa una entidad única, muy compleja... Y yo necesito por ejemplo actualizar una parte del formulario... o introducir claves de una parte del formulario en otras tablas relacionadas. Quiero un solo formulario que me haga todas las tareas operativas relativas a esa clase. No creo que esté violando el principio de responsabilidad única aún ignorando su existencia.
    – A. Cedano
    Commented el 8 nov. 2017 a las 15:53
0

la idea base seria esta:

lo que necesitas hacer es usar grep:

generas un array con los elementos del boton que pulsas: en el onlick capturas el id del boton

var arr1 = [ name, apellido];
var arr2 = [ campo1, campo2];
var arr3 = [ campo3, campo4];

Generas un formulario virtual:

formData    = new FormData(),

haces un if para saber que funcion ejecutas:

if(nameboton='enviarpersona'){
    $.grep(arr1, function( n, i ) {
        var name = $(v).attr("name");
        var val = $(v).val();
        formData.append(name, val);
    });
}elseif(otro boton){
    otro bucle array
}

funcion ajax y envias el formData

data: formData,

Debes adaptarlo a tu necesidad

http://api.jquery.com/jquery.grep/

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.