Y asi funciona serialize() en jQuery

mayo 3, 2011

La verdad es que el método .serialize() de jQuery es un salvavidas a la hora de procesar los datos que son introducidos en un formulario, el cual devuelve una cadena de texto preformateada lista para ser trabajada por algún sistema que preparemos para lo que queramos.

La idea de utilizar serialize es para ahorrarnos el trabajo de extraer los 50 o más valores que tengan 50 o más campos de texto que hayamos hecho para enviar mediante el parámetro data en ajax… pero……… la idea es hacerlo bien, y no pasarse una hora intentando encontrar el error del javascript, cuando solo faltaba escribir el atributo name a cada input…

Para dejarlo clarito clarito pongo un ejemplo de lo que no hay que hacer.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 <title>Serialize jQuery Demo en Cerocreativo.cl</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
 $("#formulario").submit(function(){
 var cadena = $(this).serialize();
 alert(cadena);
 return false;
 });
 });
</script>
</head>
<body>
<form action="#" id="formulario">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre"/><br />
<label for="email">E-mail:</label>
<input type="text" id="email"/><br />
<label for="asunto">Asunto:</label>
<input type="text" id="asunto"/><br />
<label for="msg">Mensaje:</label>
<textarea id="msg" cols="5" rows="10" tabindex="4"></textarea><br />
<input type="submit" value="Enviar" />
</form>
</body>
</html>

En el código anterior, lo que hace que no funcione, y esto está documentado en mi bitácora personal, es que los tags input y textarea no tienen su atributo name, entonces de alguna manera no se puede obtener el valor del susodicho campo. La solución cuál es? se preguntará usted… bueno, simplemente es agregar aquel atributo y listo! 😀

Entonces lo dejamos así:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 <title>Serialize jQuery Demo en Cerocreativo.cl</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
 $("#formulario").submit(function(){
 var cadena = $(this).serialize();
 alert(cadena);
 return false;
 });
 });
</script>
</head>
<body>
<form action="#" id="formulario">
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" id="nombre"/><br />
<label for="email">E-mail:</label>
<input type="text" name="email" id="email"/><br />
<label for="asunto">Asunto:</label>
<input type="text" name="asunto" id="asunto"/><br />
<label for="msg">Mensaje:</label>
<textarea name="msg" id="msg" cols="5" rows="10" tabindex="4"></textarea><br />
<input type="submit" value="Enviar" />
</form>

</body>
</html>

Y luego de eso todos, incluídos jQuery y serialize, seguimos como amigos.

Saludos.

  • pichabrava

    Eres un pelotudo reloko culiado, vos se olvido los name, jajaja, que huevon!

    • haha, si, puede que sea un pelotudo, pero lo bueno está en reconocer los errores y ver cómo pueden ser mis errores de utilidad para los demás 😉

      saludos!

      • ada

        Muchisimas gracias, estaba como tres días probando y tu solución me salvo. Gracias mil

    • jjajjjaa que hijo de puta el comentario xD

  • Migueledo Nuñez

    Me fue muy util el articulo. Me habia pasado lo mismo, es que yo creia que name e id eran similares. Muchas Gracias por publicar esta clase de articulos, son una gran ayuda.

    • esa era la idea Migueledo, que a alguien como tu pudiera servirle conocer mi error 😀

      saludos!

  • Luis Hildebardo Moreno Flores

    Excelente gracias por el aporte.

  • Cape

    Te la rifaste no podía encontrar el error saludos!!!!

  • ArSu

    jejej gracias el mismo error estaba cometiendo, y no me habia percatado de los name 😉

    • mendezpaulo

      me alegra que te haya servido ArSu

      • ArSu

        🙂

  • celso

    Que buen tip por eso chupen me todos la polla gratis no les voy a cobrar

  • Buen articulo a la hora de explicar .serialize() le dejo un link a una pagina donde explican también javascript y jquery, ahora tienen un tutorial de como crear un carrtio de compras en javascript sin base de datos, muy bueno.Diseño Web

    Saludos Cerocreativo

  • Edgardo Li Santi

    Muy bueno, breve y efectivo. Muchas gracias.

  • Alberto Sanchez

    Muchas gracias, me has salvado de pasar horas buscando un error estúpido! 🙂