Cuando trabajamos con PHP un sistemas con al menos unos pocos módulos de distintos tipos pero seguramente más de uno maneja formularios; ya aquí entra en juego distintas tecnologías webs como JavaScript o incluso jQuery que aún mantiene terreno contra otras tecnologías similares a esta; la API de jQuery mantiene una importante cantidad de métodos a emplear, hoy les vengo a contar de uno muy interesante que seguramente nos permitirán ahorrarnos muchísimas líneas de código JavaScript, muchos errores por nuestra parte y por lo tanto mucho trabajo; se trata del método serialize() de jQuery.

¿Qué permite el método jQuery .serialize()?

El método .serialize() de jQuery analiza los formularios en busca de inputs, textareas, campos de selección, campos de tipo texto y en resumen cualquier tipo de campo soportado por la API HTML que podamos emplear en un formulario para recoger datos de usuario.

Ya con nuestro formulario construido, en más de una ocasión vamos a querer enviar el mismo por Ajax o hacer algo similar; y es aquí en donde entra el método .serialize() de jQuery.

¿Para que se puede emplear el método jQuery .serialize()?

Una vez analizado el formulario, procede a crear una cadena de texto en la notación URL-encoded; es decir, permite codifica la cadena de texto para que pueda ser procesada fácilmente desde un lenguaje del lado del servidor como si se tratase de un GET pero sin la necesidad de cargar la página para obtener estos valores; por eso en un inicio se indicaba la ganancia en líneas de código, ya que no tenemos que iterar uno a unos los campos del formulario y procesarlos vía JavaScript; con invocar este método hace todo el trabajo por nosotros.

En otras palabras, permite obtener los valores del formulario sin la necesidad de que el usuario los envíe presionando el botón submit; esto es útil si se desea crear un formulario con un comportamiento que involucré analizar constantemente datos del formulario en el servidor sin la necesidad de que concatenamos uno a uno los campos del formulario.

Aunque la función .serialize() es tan completa y versátil que no tenemos que emplearlo en un conjunto completo de campos de un formulario; también puede ser empleado en elementos individuales del mismo formulario; por ejemplo:

$( "input#mi_id" ).serialize();

O un grupo de estos:

$( "input, textarea, select" ).serialize();

O incluso el formulario entero que vendría siendo lo habitual:

$( "form#mi_form" ).serialize();

En resumen, podemos emplear el método .serialize() de cualquier forma soportada por los selectores de la librería de jQuery.

Ejemplo del uso del método .serialize() de jQuery

Para el siguiente formulario:

<form id="mi_form" >
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
 
  <br />
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
 
    <option selected="selected">Multiple3</option>
  </select>
  <br/>
  <input type="checkbox" name="check" value="check1" id="ch1"/>
  <label for="ch1">check1</label>
 
  <input type="checkbox" name="check" value="check2" checked="checked" id="ch2"/>
  <label for="ch2">check2</label>
  <br />
  <input type="radio" name="radio" value="radio1" checked="checked" id="r1"/>
 
  <label for="r1">radio1</label>
  <input type="radio" name="radio" value="radio2" id="r2"/>
 
  <label for="r2">radio2</label>
</form>

Y el siguiente código JavaScript

  function form_serialize(){
      var str = $("form#mi_form").serialize();// aplico el metodo 'serialize' al formulario y lo guardo en la variable str
      $("p#results").text( str );
  }
  $("form#mi_form").on( "change", form_serialize);

  $(document).ready(function(){
    form_serialize();
   });

Demostración del uso del método .serialize() de jQuery

Single Single2 
Multiple Multiple2 Multiple3 
check1 check2 
radio1 radio2 

Como resultado tenemos la cadena de texto en la notación URL-encoded: