Seguro 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
como paso ese array de valores a $.post de ajax para mostrar el resultado en el index
Muchas gracias por tu script, me ha servido muchisimo
Salu2!
Gracias por el gran aporte, sólo como comentario, al momento de ejecutar el form, al pasar los valores me recogía un valor de más, esto adquiere relevancia al trabajar con base de datos ya que es un registro más.
por ejemplo
$mail[0] = ‘elemail0@cero.com’;
$mail[1] = ‘elemail1@cero.com’;
$mail[2] = ‘elemail2@cero.com’;
$mail[3] = ‘elemail3@cero.com’;
$mail[4] = ‘ ‘; // Este que queda de más con el for ($i=0; $i<=count($emails); $i++) {
Para solucionarlo en la línea del flor puse
for ($i=0; $i<=(count($emails)-1); $i++) {
le resté 1 al count.
Saludos y muchas gracias.
perdón Me retracto xD … me dio error!
Saludos: No sé nada de Java, el scritp me parese muy bueno y es lo que yo estaba buscando, aunque lo que requiero es ir agregando un bloque de tres campos, por ejemplo: email[] nombre[] y telefono[] pero como ya mencioné, no tengo ni idea de como hacerlo. ¿Me podrían compartir el código para este caso?
Gracias y felicitaciones por tan buen trabajo.
Buenas me gustaria saber como se hacer para aglegar varios campos y que en uno de los campor el valor sea la suma del atenrio mas 1
He estado viendo tu codigo y si me funciona a mi proyecto pero necesito una ayudita como hacer para que aparezcan dos text box a la par ya que en uno quiero meter un codigo y en la otro un precio me puedes hechar al mano y como obtendria los valores en el for por medio del POST, gracias por gente como tu uno conoce mas
En la funcion «agregar» añade una variable más con los datos de tu campo y un append al final, si deseas que aparezca en otro lugar cambia el $(«#emails»).append(campo); por el ID de la nueva ubicación
Y el for debes duplicarlo para el otro campo, no puedes meterlo en el mismo a menos que siempre vaya a haber la misma cantidad de elementos
Consulta como hago para que no se pierdan los datos ingresados si vuelvo a tras (solo deja el primer campo creado)
Si recargas los vas a perder si o si al menos que crees una cookie que los contenga o algo asi
Hola una pregunta ¿Como es que los mandas a la base, como realizas la insercion???????