Obtener los datos de un formulario con serialize()
En este artículo vas a descubrir como capturar o obtener rápidamente todos los datos de un formulario con la función serialize() que está disponible en la librería jQuery.
Cuando trabajas con formularios con muchos datos y muchos campos es posible que consideres un poco tedioso tener que capturar cada campo para enviarlos como parámetros a una llamada Ajax por ejemplo.
jQuery tiene una función llamada serialize() que te puede ahorrar mucho trabajo.
Esta función permite transformar la información que viene del formulario en una cadena de texto apta para construir un dataString que puede recibir un archivo PHP cuando se ejecuta una llamada Ajax.
En formularios largos esta función puede ahorrarte mucho trabajo.
En el ejemplo en funcionamiento vas a ver un formulario pequeño con tan solo 3 campos pero, ya puedes ver la ventaja que ofrece serialize() al serializar dinámicamente todos sus campos y valores en una cadena.
Formulario HTML
El código HTML del formulario se puede agregar en el cuerpo de la página o dentro de la etiqueta <body>. Puede ser algo como lo siguiente:
<form id="create-account-form" action="#">
<div class="form-group">
<label for="name">Nombre</label>
<input type="text" class="form-control" id="name" name="name" value="Demo Demo">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" name="email" value="demo@demo.com">
</div>
<div class="form-group">
<label for="description">Descripción</label>
<textarea class="form-control" id="description" name="description" rows="3">Lorem ipsum</textarea>
</div>
<button type="submit" class="btn btn-primary" id="create-account-button">Crear cuenta</button>
</form>En este formulario el usuario puede introducir un nombre, un email y una descripción.
Dentro del formulario también hay un botón con identificador «create-account-button» que uso a continuación para controlar el evento «click».
Serialización del formulario con jQuery serialize
Fíjate bien en el siguiente código que puedes agregar en la cabecera de la página o antes de la etiqueta de cierre del </body>:
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
$(document).ready(function() {
$('#create-account-button').on('click', function(e) {
e.preventDefault();
var dataString = $('#create-account-form').serialize();
alert('Datos serializados: '+dataString);
});
});
</script>Donde estoy agregando la librería jQuery y seguidamente esperando a que el botón del formulario sea pulsado.
En el momento de pulsar el botón, se omite la funcionalidad por defecto del formulario para serializar la información del formulario asignando su resultado a la variable dataString para mostrarlo en una alerta.
Conclusión
La función serialize() es muy útil usarla cuando tus formulario son largos y necesitas enviar toda la información a un archivo PHP utilizando la técnica Ajax. En este punto, puedes construir un dataString de forma rápida sin necesidad de ir campo a campo.
En la mayoría de los casos los datos de los formularios requieren ser validados. Puedes hacerlo de forma independiente a esto. La validación de los campos la puedes hacer antes de la serializacion. En este caso, si que tendrás que revisar campo a campo para revisar si todo está correcto para proceder con la serialización y envío al servidor.
Esta entrada ha sido actualizada el 14/08/2019.
Autor
¿Buscas trabajo de programador?
47 respuestas a “Obtener los datos de un formulario con serialize()”
Deja una respuesta
118 artículos que te podrían interesar
Ver más sobre
Hola Jose.
Muchas gracias por tu aporte, es sencillo, claro y conciso.
Hago una pequeña introducción para contextualizar.
La pagina web es un cuestionario de inscripción a una universidad con x cantidad de preguntas (las respuestas son «si» o «no») que las manejo con un checkbox, ahora dependiendo la carrera que elijan cambia la cantidad de preguntas, es decir que la pagina se completa dinámicamente.
Aca viene mi problema, cuando paso los datos con serialize desde jquery a PHP se me complica recibir los datos porque nunca se cuantas preguntas van a venir.
Esta opción ya la descarte
$pregunta_1 = $_POST[‘pregunta_1’];
$pregunta_2 = $_POST[‘pregunta_2‘];
Entiendo que debería usar un foreach pero no me estaría saliendo.
Alguna sugerencia?
Gracias.
Saludos.
Un foreach para recorrer el array post sería una buena solución. Si todos tu campos siguen la secuencia ‘pregunta_x’, sería sencillo dentro del array consultar si «pregunta_x» viene?
hola, tengo una página con publicación de contenido y comentarios, he tenido problemas al tratar de que al comentar no me cargue la página solo debe ejecutar el evento del formulario que es clickeado, veo el ejemplo, no he intentado aún con serialize(), mi duda es como imprimo los valores del datastring en un archivo php?
Hola,
Para pasar los datos al PHP puedes usar Ajax o Fetch pasando los parámetros por post o get.
Saludos
hola tengo una consulta hago todo bien el formulario me capta los campos que necesito lo envio por medio de ajax me lo recibe el php ahi todo bien, ahora bien recargo solamente la parte donde estan los datos del formulario, pero cuando vuelvo a usar la funcion serializeArray(), me vuelve a cargar los datos que anteriormente ocupe, si me puede ayudar se los agradezco
Hola,
Quizás en tu caso necesitas hacer un reset de los campos del formulario.
Es posible que algo así te pueda servir:
$(‘#create-account-form’).reset();
Esto lo ejecutas justo dentro del success, cuando todo ha ido bien, por ejemplo.
Saludos
hola que tal, soy nuevo en la programacion, pero tengo una pregunta, tengo un formulario y dentro de él. tengo un input que si le ingresas un valor se mutiplica y agrega mas formularios, por ejemplo cuantos hijos tienes? =2 entonces pone dos formularios para que llene la informacion de los 2, hasta hay perfecto. mi formulario lo dividí en varios tabs ya que el formulario es extenso, entonces al momento de enviar me envía vació los campos multiplicados los demas, me los guarda perfecto en la base de datos. nose como hacer si este ajax me serviria, saludos Gracias
Hola,
Para averiguarlo solo tienes que revisar si el serialize() capta todos los campos de tu formulario.
Saludos
tengo dos campos, el uno es oculto (type=’hidden’) y el otro es deshabilitado (disabled=’disabled’) y al hacer el $(‘#form’).serialize(); funciona correctamente, pero los dos campos no son admitidos en la cadena y no puedo pasar los mismos por el objeto ajax al url de ingresod de informaci’on.
Como corrijo el error?
Hola,
Prueba a poner los campos como normales type=»text» pero con alguna capa superior con style=»display:none;». Quizá de esta forma los capte.
Saludos
Una consulta hay alguna forma de aumentar valores luego de usar serialize
Hola,
No estoy seguro si es lo siguiente lo que necesitas. Tampoco lo he probado si funciona pero tiene toda la pinta de que si:
var dataString = $(‘#form_account’).serialize() + ‘&nuevavariable=1’;
Saludos
Creo que no funciona para campos tipo hidden, puedes ayudarme?
Como es el proceso para serialize() dentro del formulario hay una foto y quiero pasarla por ajax al archivo php que se encarga de mover la foto y cargar la base de datos, ayuda urgente
Dejamos el tema abierto por si alguien pudiera responder
¿Y si los datos del formulario vienen desde otra página a través del «action» del formulario?
¿Cómo lo recoges con Jquery?
Hola,
Si los datos del formulario vienen de otra página, creo que una solución es usar el método GET en el method del formulario y recoger los parámetros de la url con jQuery.
Saludos
Hola
Tengo un dataString que hice con serialize(), lo que quiero es cambiar en valor de concatenado que trae por defecto. Es una coma (,) y en su lugar colocar una barra ( | ).
Habrá alguna función que me pueda ayudar a realizar ese cambio?
Saludos.
Hola,
Deberás buscar referencias en internet sobre «str_replace javascript». Hay distintas posibilidades.
Saludos
hola alguien que me pueda ayudar tengo un problemita, tengo un formulario con muchos campos para lo cual utilizo .serialize para grabar todos esos datos sin problema, lo que no he podido resolver es que necesito regresar dos resultados en dos DIV diferentes y no se como hacerlo
Lo mejor, antes tenia qu crear una variable para cada campo, ahora con 3 lineas hago lo que quiero, muchas gracias, eres el mejor.
al escribir con espacio me sale el simbolo +
Hola José Aguilar, quiero darte las gracias por tus buenos tutos en estos post, siempre eh admirado a las personas que les gusta compartir su conocimiento con los demás, eh aprendido mucho aquí. Saludos
gRACIAS, POR TU EJEMPLO.. MI CASO ES DIFERENTE QUIERO ENVIAR EL CAMPO A UN PDF, POR EJEMPLO:
var datastring = $(form[‘id_articulo’]).serialize();
$.ajax({
type: «POST»,
url: «reportes/pdf_individual_id.php»,
data: datastring,
dataType: «json»,
success: function(data) {
}
});
Y SI LO ENVÍA PERO COMO LE HAGO PARA QUE ABRA LA URL , POR FAVOR AYUDA
Me ha funcionado var datosForm = new formData(document.getElementById(‘campo’)); al enviar un archivo pero estoy definiendo mensajes de confirmacion y error usando json y no consigo que se visualizen no sale ningun mensaje de error simplemente no se ven. Como soluciono eso?.
Buenas Jose.
Supongamos que tengo un formulario con cuatro campo, uno de ellos hidden,
– Codigo (hidden)
– Nombres
– Apellidos
– Ubicacion
Al serializar, obviamente el campo «Codigo» se va en blanco. Posteriormente, al guardar, genero el «Codigo» a asignar. La pregunta es, como actualizo los datos serializados con el nuevo valor de «Codigo»?? Ya que hacerlo «manualmente», me genera un parsererror.
Gracias por tu tiempo hermano!!!
Hola buenas tardes,
Me parece que en este caso no podrás utilizar la función serialize(). Deberás capturar los campos de forma individual para procesar también el código hidden de forma correcta.
Saludos
Que tal tu ejemplo esta bien explicado,
pero mi duda es como accedo a los elementos ahí mismo,
necesito hacer unas validaciones antes de mandar la información a la pagina PHP (°-°)/
HOla,
Para acceder a los elementos ya si que necesitarás ir uno a uno para validarlos por ejemplo para el campo nombre del ejemplo:
if($(‘#name’).val() != »)
Saludos
Muchas pero muchas gracias !! Vi montones de ejemplos y era tan facil con serialize(); muy util, thanks men.
Es necesario poner el script en la cabezera? lo ubique en otro lugar y no serializa nada
Gracias!
Muy buena aportación!
Necesito saber como hacerlo si el formulario envía por post también un fichero, es decir, un input type=’file’. Lo realizo pero no envía serializado este dato no sé porque.
Si puedieras darme una solución estaría agradecido.
Un saludo!! gracias!!
Esta manera es la que utilizo y me funciona si problemas
/********* html *************/
Nombre
Archivo
Enviar
/********* Jquery con JavaScript *************/
supongamos que ya esta cargada la libreria Jquery
$(function(){
$(«#miFormulario»).on(function(){
var datosForm = new formData(document.getElementById(«miFormulario»));
$.ajax({
data: formData,
url: ‘ejemplo_ajax_proceso.php’,
type: ‘post’,
dataType: html,
beforeSend: function () {
$(«#resultado»).html(«Procesando, espere por favor…»);
},
success: function (response) {
$(«#resultado»).html(response);
}
});
});
});
/**** y el archivo que recibe los datos los haces de forma normal
como se hace comunmente $algo = $_POST[‘algo’]
como si hubieras mandado de un html a php
Espero y te sirva compañero (°-°)/
Excelente, en verdad, con esto me ahorro de enviar una cadena larga de parámetros, jejeje, aun soy novato! gracias por la información voy ha probarle.
gracias por compartir el conocimiento,pero tengo una duda al colocar el atributo required al input ,ya no valida que el campo sea completado,alguna solución.
Excelente info.
Realmente este metodo es muy util, me ha servido mucho
Saludos desde Chile
y si tengo un form dentro de otro form??? el serialize para el primero deja de funcionar.
La pregunta es tiene lógica tener un form dentro de otro form?
y para devolver los datos obtenidos del formulario debajo del mismo en un div id=responseContent como hago??
Dentro del success de la llamada ajax añades tu código de respuesta, como por ejemplo:
success: function(data) {
$(‘#resonseContent’).html(data);
}
Che loko, se le olvido poner algo importante, reconcha!
$(‘#create_account’).click(function(e){
e.preventDefault();
Si no te agregas eso, cuando chekas el boton submit, el formulario se enviará tambien por el metodo normal, recargando la página al hacer la petición. Agregate eso a tu code hermano y listo.
Culiado!
Muchisimas gracias me sirvio de maravilla. Y tu codigo no esta mal, si necesitas mas de tres campos agregar mas campos en form. Yo lo utilizo con 20 campos… Mis mejores deseos y gracias por la colaboracion.
Podrías poner el contenido del fichero account.php en el que se recive los datos serializados, para ilustrar como se deberían de manipular los datos recividos para por ejemplo insertarlos en una tabla de MySql
Gracias.
El contenido del archivo account.php sería muy sencillo. Los datos del formulario de ejemplo los recibiríamos de la siguiente forma:
$name = $_POST[‘name’];
$email = $_POST[‘email ‘];
$password = $_POST[‘password’];
//Realizas el INSERT SQL CON ESTOS DATOS
//y si quieres que devuelva algo haces un echo
echo ‘El usuario se ha registrado correctamente’;
Después tendrás que añadir tu código de salida del ajax dentro del success. Lo más sencillo es poner un alert(data);
Sr. ese codigo que uste pone esta mal. Claro que funciona para solo tres campos pero que pasa si en de 3 paso 20 o 30 campos alli eso no sirve de nada
Che culiado, no rompas las bolas, ¿que pasa si hay 30 campos? pues vos tendreis que procesar esos 30 campos o lo vais a insertar directamente en la bbdd, dejando asi un boquete enorme a los ataques de mysql inyection? Vos sos un lloron y un bocon que lo quereis todo en bandeja de plata.
El post habla de como recojer datos con jquery, petero! no de como haceros la web que esteis haciendo vos bocon. Aprenda a programar antes de venir a romper las bolas con sus pelotudeces!
Viva Mendoza, culiados! reconcha!
Gracias, me sirvió este post… saludos