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.
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