Agregar campos usando AJAX jquery
Categories: AJAX, javascript - Tags: AJAX, formulario, jquerySeguro hemos visto algunas páginas ajax en las que piden por ejemplo correo luego podemos apretar un botón “añadir” y se agrega un campo más para insertar un nuevo correo y asi cuantos deseemos; también hay algunos más complicados en los que puedes añadir por ejemplo detalles de tu experiencia laboral en un curriculum.
La idea es los casos mencionados es exactamente la misma (campos mas, campos menos) por cuestión de espacio y tiempo explicaré como funciona la más sencilla para ello debemos tener claros algunos conceptos previos.
Arrays de controles HTML
Como no sabemos cuantos campos quiera añadir el usuario, debemos estar preparados para recibir cualquier cantidad de datos por lo cual vamos a usar un array de controles como este:
1 | <input type="text" size="20" name="email[]"> |
Lo unico distinto con cualquier otro control es que al final del nombre uso unos corchetes.
Manejando arrays de controles con PHP
Normalmente en PHP los campos recibidos llegan con POST o GET según corresponda y podemos manejarlo directamente pero con los arrays se manejan un poco distinto, algo así:
1 2 3 4 5 6 |
¿Cómo agregar campos?
Para esto voy a usar un link que invoque a una funcion javascript que agrega el campo adicional
La función usando jquery es muy sencilla basta usar “attend” para que al final agregue un campo adicional
1 2 3 4 5 6 | <script type="text/javascript"> function agregar() { campo = '<li><label>Email:</label><input type="text" size="20" name="email[]" /></li>'; $("#emails").append(campo); } </script> |
El tema de la presentación o de usar alguna imagen ya depende de nuestra hoja de estilos aunque en este ejemplo he usado un sólo campo es posible usando el mismo código para añadir bloques completos de campos.
——– Actualización ——-
Varios lectores me preguntaban como hago para borrar los campos ingresado, eso lo ven AQUI
Hola sabes que interesante tu post el unico detalle es que no funciona el archivo php
Lo he probado y si funciona, aunque si no ingresas ningún correo simplemente aparecerá una pantalla conm un titulo. ¿Estas probando el script en un servidor?¿aparece algún error?
He utilizado este script haciendo una modificaciones para agrear un campo mas y funciona perfecto. Gracias por compartir los conocimientos.
Como puedo tomar los datos con javascript de los campos creados ????
Gracias.
¿xq con javascript? la forma es igual como cualquier campo comun en jquery valor= $(‘.nuevocampo1′).val();
Depronto no me hice entender. Al crear los campos con este script, los campos quedan con la propiedad name=”email[]” (o puede ser id=”email[]“), los n campos creados. Ahora, si yo creo 10 campos de estos, como tomo los valores de cada uno de ests campos. Utilizando la propuesta de valor= $(’.email[]’).val(); creo q’ genera conflicto al tener los 10 campos con el mismo nombre.
Gracias.
No me estas entendiendo muy bien lo que te digo es los campos si bien es cierto que se llaman micampo[] tu podrias ponerles la clase que desees con un contador $(‘.nuevocampo1′).val(); $(‘.nuevocampo2′).val(); y asi sucesivamente asi es posible hacer 2 cosas, borrar un campo creado y además conseguir su valor. La opcion 2 es manejarlo como array, les pones la misma clase a todos esos campos nuevos y agregas un bucle como por ejemplo este sumador $(‘.items’).each(function () { total_direct += Number($(this).val());
}); ojo no toco para nada el nombre del campo de texto olvidate de eso es mas facil y rapido usar clases y/o ID
hola perdon por mi ignorancia, yo los estoy tratando de implementar en un archivo cgi pero no me sale, no se si se pueda en esos tipos de archivos???
El codigo funciona en HTML, PHP, ASP, JSP pero CGI funciona distinto, pense que ya nadie usaba ese formato en estos tiempos es muy pero muy antiguo
gracias por tomarte la molestia de responderme, si es bastante viejo pero es con lo que tengo que trabajar. Lo que quiero hacer es que agregar combos diferentes pero que no se clonen como en javacript sino que se esten agregando diferentes combos cada vez, con un contador puedo diferenciar los combos pero lo que necesito es que no se clonen. No soy avanzado y realmente conozco poco, no se si me puedas dar algunas sugerencias de como hacerlo muchas gracias
Migue, como hago, si de los n-campos creados necesito borrar uno específicamente ?
Generalmente a la hora de crear los campos se les asigna una clase y un link borrar algo como
y la función que lo borra sería algo como:
<li class="campo-1"><a href="#" onclick="javascript:borrar(1);">Borrar</a></li>
function borrar(cual){
$(“li.campo-”+cual).remove();
return false;
}
Miguel, pero me gustaría añadir esta línea en la función completa que posteaste… es decír, que añada los campos y cada campo que se añada tenga a su lado derecho la opción de borado.
Me podrías hacer el favor de postearmela completa?
Es que ando empezando con esto…
Gracias, por todo !
La solución a como agregar y borrar campos esta en la segunda parte
Hola miguel, estoy tratando de aplicar esta super utilidad, pero continuo con algunos problemas con el aprovisionamienrto correspondiente, no se si puedes ayudarme, no soy bueno manejando javascript, ajax y jquery, pero lo que he realizado es agregarle un for(i=1;i<=10;i++){campo = \\\'\\\’; } mi duda radica en que cuando presiono el boton de agregar aparecen 10 rugros, como te decia se puede decir que soy muy novato con javascript, ajax y jquery, hay alguna forma para que aparezcan uno a uno hasta el numero diez y no se puedan agregar, te agradeceria que me ayudaras si es posible enviando correo electronico por favor.
Es sencillo, antes del bucle for coloca un if count($emails)<10 se ejecute el bucle FOR de lo contrario muestre un mensaje de alerta o no haga nada
Hola,
Este tutorial me ayudo para realizar algo que necesitaba, pero me he encontrado con un problema, quizás no sea el lugar para realizar esta pregunta, pero con probar no pierdo nada.
La idea es esta, agrego unos campos con jQuery y doy submit, en la pagina siguiente con los datos del formulario cargo una cookie, si hago back en el navegador la página que tenía el formulario lee es cookie y recarga los campos agregados como si fuera un history, el problema es que si hago submit nuevamente los campos agregados desde la cookie no pasan… si pudieran ayudarme a solucionarlo lo agradecería, me imagino que quizás la solución es algo como live.submit, pero no doy en el clavo.
Tengo una página de prueba
http://telemet.com/pruebas/index.php
En efecto ese tipo de consultas mejor es por correo, pero bueno. Cuando uno envia cualquier formulario hay el riesgo que el usuario de back o actualize la página y genere datos duplicados hay 2 formas de evitarlo 1. usa un token (más efectivo aunque trabajoso, prueba la librería spoon) 2. la página que recibe los datos usando header() debe redirigirte a una página de respuesta así aún haciendo refresh o back los datos no se reenviarán.
Antes que nada muy buen tuto me sirvió bastante, pero tengo una pregunta ¿como puedo validar con jquery esos multiples campos? osea que los que vaya agregando si no los llenan no puedan enviar el formulario, de ante mano muchas gracias por tu tiempo
Si usas un plugin de validación de jquery debes invocarlo cada vez que creas un campo nuevo para que sea afectado, de preferencia usa una clase y no un ID