Formularios jQuery serializeArray()

by | Abr 18, 2019

El método “serializeArray()” permite crea una matriz de objetos (nombre y valor) al momento de serializar el o los formularios.

Ademas, puedes seleccionar uno o más elementos de formulario (como “input” y/o área de texto), o el propio elemento de formulario.

Acá algunos ejemplos que te pueden ayudar…

Para enviar toda la información de form desde jquery se debe serializar, de la siguiente forma:

$("form[id='formulario']").serializeArray();

Por ejemplo, para mostrar todos los “value” del formulario seria de la siguiente forma:

$("button").click(function(){
  var x = $("form[id='formulario']").serializeArray();
  $.each(x, function(i, field){
    $("#results").append(field.name + ":" + field.value + " ");
  });
});

Si quieres enviar todos los datos del formulario por “ajax” seria de la siguiente forma:

$("button").click(function(){
  var formData = $("form[id='formulario']").serializeArray();
   $.ajax({
        url: 'ajax_Test.asp',
        type: 'POST',
        data: formData,
        beforeSend: function () { },
        success: function (response) {
             alert("Termino");
        }
   });
});

Ahora, si quieres agregar más “parámetros” específicos al método “POST”, tendrías que hacerlo de la siguiente forma:

   formData.push(
       { name: "opt", value: opcion },
       { name: "terminar", value: terminar }
   );

Quedaría de la siguiente forma:

$("button").click(function(){
   var formData = $("form[id='formulario']").serializeArray();
   formData.push(
       { name: "opt", value: opcion },
       { name: "terminar", value: terminar }
   );
   $.param(formData);

   $.ajax({
        url: 'ajax_Test.asp',
        type: 'POST',
        data: formData,
        beforeSend: function () { },
        success: function (response) {
             alert("Termino");
        }
   });
});

Para agregar múltiples formularios basta con agregarlos al “serializeArray”, de la siguiente forma:

var formData = $("form[id='formulario1'],form[id='formulario2'],form[id='formularioN']").serializeArray();