Una situación que se nos presenta cuando trabajamos con sitios web es la de crear campos de manera dinámica. En esta breve entrada explicaré como pueden crearse campos dinámicos en una página HTML aprovechando Javascript.
Supongamos el siguiente escenario: Nos solicitan una página para la captura de artículos con la particularidad de que el usuario pueda agregar tantos como desee. La finalidad es claro: acelerar la captura.
Comenzaremos agregando un formulario que incluirá un enlace para permitir que el usuario vaya agregando los campos que requiera:
<form id="formdinamico" name="formdinamico" action="prueba.php">
<table border="0" width="100%">
<tr>
<td></td>
<a href='JavaScript:agregarCampo();'> Agregar campo de captura </a>
</tr>
</table>
</form>
Ahora, para poder agregar campos de manera dinámica a un formulario deberemos establecer primero un contenedor de los elementos. Para ello usaremos un DIV que definiremos de la siguiente manera:
<div id="contenedorcampos"> </div>
en “contenedorcampos” es donde todos los elementos que vamos a crear irán siendo agrupados. De esa manera podremos controlar siempre la manera en que se visualizarán. Este div debe incrustarse dentro de los tags del formulario quedando el bloque completo de la siguiente manera:
<form id="formdinamico" name="formdinamico" action="prueba.php">
<table border="0" width="100%">
<tr>
<td></td>
<a href='JavaScript:agregarCampo();'> Agregar campo de captura </a>
</tr>
</table>
<div id="contenedorcampos">
</div>
</form>
Una vez que tenemos definido el formulario y él vínculo para ir agregando campos vamos a crear un archivo prueba.js donde codificaremos las funciones destinadas al control de los campos.
Lo primero que haremos en prueba.js será definir una variable que almacene el número de controles creados. La definiremos de la siguiente manera:
var campos = 1;
la variable “campos” nos permitirá como mencioné previamente llevar un registro de los controles creados dentro del formulario, además nos servirá para identificar a cada control.
Ahora, vamos a definir la función responsable de la creación de cada control:
function agregarCampo(){
campos = campos + 1;
var NvoCampo= document.createElement("div");
NvoCampo.id= "divcampo_"+(campos);
NvoCampo.innerHTML=
"<table>" +
" <tr>" +
" <td nowrap='nowrap'>" +
" <input type='text' size='50' name='articu_" + campos +
"' id='articu_" + campos + "'>" +
" </td>" +
" <td nowrap='nowrap'>" +
" <a href='JavaScript:quitarCampo(" + campos +");'> Quitar </a>" +
" </td>" +
" </tr>" +
"</table>";
var contenedor= document.getElementById("contenedorcampos");
contenedor.appendChild(NvoCampo);
}
como puede observarse, la función agregaCampo es responsable de agregar un bloque Html a nuestro contenedor. El nuevo bloque Html contiene los tags necesarios para definir un nuevo control con su propio identificador como puede notarse en la concatenación del nombre de campo y el número de control.
Ahora, ¿qué sucede si alguno de los campos creados no es necesario?, para ello vamos a definir la siguiente función:
function quitarCampo(iddiv){
var eliminar = document.getElementById("divcampo_" + iddiv);
var contenedor= document.getElementById("contenedorcampos");
contenedor.removeChild(eliminar);
}
esta función será responsable de remover un campo creado de manera dinámica y es incluida dentro de la creación de nuevos campos.
una vez que tenemos todo definido vamos a ejecutar en nuestro navegador la página y veremos lo siguiente:
Ahora, para probar la funcionalidad de nuestro formulario de campos dinámicos, crearemos el archivo prueba.php y agregaremos lo siguiente:
<?php print_r($_REQUEST); ?>
Al ejecutar nuestra página de prueba nos encontraremos una salida conteniendo lo siguiente:
Array
(
[articu_2] => campo1
[articu_3] => campo2
[articu_4] => campo3
[articu_5] => campo4
[Guardar] => Guardar
[PHPSESSID] => gr4mmav8kvs2e3kn2782udp494
)
El código fuente de este artículo podrán encontrarlo aquí
Muy buen artículo Poli.
Un saludo.
Es un gusto compartir amigo mio. Un abrazo
hola oye disculpa tengo un problema y espero y me puedas ayudar necesito hacer un formulario dinamico como el que creaste pero este a su ves debe de tener otro subformulario, el cual tambien puede ir creciendo como quiera el usuario… no se si me puedas ayudar ya hise la parte del formulario principal pero a la hora de hacer la conexión con el segundo “.js” no la hace y obvio quiero que me regreso todos los datos de los formularios … ojalá y me puedas ayudar de antemano gracias
Claro. Puedo ayudarte con gusto, en aras de que tu duda pueda ser útil para alguién más, ¿te parece si la posteas en el foro http://www.delphiaccess.com/forum/php-ajax-javascript-java-y-html/ y allí le damos seguimiento? será necesario que incluyas una copia del código que tienes para corregirlo. Saludos
hola ya creé el foro mira la pag es http://www.delphiaccess.com/forum/php-ajax-javascript-java-y-html/ayuda-con-formularios/ espero y me puedas ayudar mmm a la hora que subi la parte del archivo “pruebaprofesores.js” en la parte del foro no se copiaron los signos de “+” como lo tienes tu espero y no esté muy confuso …. espero y me puedas ayudar……. de ante mano gracias por el tiempo de leerlo
Listo, ya comencé a responder allí. Saludos
Buen dia,,probe el codigo pero la salida queda visible para el usuario ??
123456789 Array ( [articu_2] => campo1 [articu_3] => campo2 [articu_4] => campo3 [articu_5] => campo4 [Guardar] => Guardar [PHPSESSID] => gr4mmav8kvs2e3kn2782udp494 )
Es un ejemplo amigo, como tal la idea fué que vieran la salida al ejecutar el post. 🙂 Saludos.
Hola disculpa que tre vuelva a preguntar pero no se si tengas tiempo para poder ayudarme con un problma que tengo .. mira cree un foro como me dijiste la otra ves … el link es este http://www.delphiaccess.com/forum/php-ajax-javascript-java-y-html/?action=post2;start=0 ojalá y me puedas ayudar……de ante mano gracias por tu tiempo …
Uhh perdon me equivoca de link es este ……..http://www.delphiaccess.com/forum/php-ajax-javascript-java-y-html/ayuda-con-formularios-9934/ graicas por tu tiempo…
Gracias por tu ayuda me sirvió de mucho ….
🙂 Es un gusto.
Consulta como haces para insertar cada uno de los datos en una Base de Datos?
Si observas en el print que hice del post, los datos que agregamos son enviados, por lo que si agregas un identificador de campo dinámico al nombre de cada input, podrás identificarlos y agregarlos a tu base de datos.
Saludos cordiales
según tu ejemplo y los paso que seguí obtengo identificadores dinámicos, me explico
si agrego 3 campos tengo nombre_1, nombre_2, nombre_3
pero cada ves que se ocupe el formulario habrá una cantidad diferente, la consulta en si es ¿El nombre del campo dinamico debe ser para todos nombre o tiene que ir con un valor como lo muestra el ejemplo? y la otra consulta es ¿En el caso que el nombre del campo tenga que ir con un valor numerico como lo inserto en la BD, con un for, un while, o con algún otro anidamiento????
Cada campo agregado dinámicamente debe tener un nombre único, por eso le agrego un índice numérico. Para almacenarlo puedes hacerlo con un foreeach.
Saludos Cordiales
Mira aun me queda la siguiente duda, logre hacer que almacenara en la BD, pero no de la forma que yo quiero
tengo el siguiente código, si esta mal favor de indicar el error
foreach($_POST as $key => $value){
$sql = (“insert into productos_oc(id_poc, num_oc, item, descrip, cantidad) value (NULL, ‘$orden’, ‘{$value}’, ‘{$value}’, ‘{$value}’)”);
$inserta = $conexion->prepare($sql);
$inserta->execute();
};
la tabla que tengo es asi
id_poc, num_oc, item, descrip, cantidad
1
Saludos Cordiales
Mira aun me queda la siguiente duda, logre hacer que almacenara en la BD, pero no de la forma que yo quiero
tengo el siguiente código, si esta mal favor de indicar el error
foreach($_POST as $key => $value){
$sql = (“insert into productos_oc(id_poc, num_oc, item, descrip, cantidad) value (NULL, ‘$orden’, ‘{$value}’, ‘{$value}’, ‘{$value}’)”);
$inserta = $conexion->prepare($sql);
$inserta->execute();
};
la tabla que tengo es asi
id_poc, num_oc, item, descrip, cantidad
1
Saludos Cordiales
Mira aun me queda la siguiente duda, logre hacer que almacenara en la BD, pero no de la forma que yo quiero
tengo el siguiente código, si esta mal favor de indicar el error
foreach($_POST as $key => $value){
$sql = (“insert into productos_oc(id_poc, num_oc, item, descrip, cantidad) value (NULL, ‘$orden’, ‘{$value}’, ‘{$value}’, ‘{$value}’)”);
$inserta = $conexion->prepare($sql);
$inserta->execute();
};
la tabla que tengo es asi
id_poc, num_oc, item, descrip, cantidad
1
Saludos Cordiales
Mira aun me queda la siguiente duda, logre hacer que almacenara en la BD, pero no de la forma que yo quiero
tengo el siguiente código, si esta mal favor de indicar el error
foreach($_POST as $key => $value){
$sql = (“insert into productos_oc(id_poc, num_oc, item, descrip, cantidad) value (NULL, ‘$orden’, ‘{$value}’, ‘{$value}’, ‘{$value}’)”);
$inserta = $conexion->prepare($sql);
$inserta->execute();
};
la tabla que tengo es asi
id_poc, num_oc, item, descrip, cantidad
1
Disculpe por no terminan lo que quería indicar
La tabla que tengo es
id_poc num_oc item descrip cantidad
1 2424x Telefono 9 botones 5
Esa es la idea de como se debe almacenar, pero lo que esta haciendo el código es:
id_poc num_oc item descrip cantidad
1 2424x Telefono
2 2424x 9 botones
3 2424x 5
Como puedo hacer para que se almacene de la forma correcta????
OK, encontré solución para lo que buscaba
en ves de usar un foreach agregue dentro del form un contador que lleva la castidad de filas que se agregas dinamicamente, aqui dejo el codigo, ojala les sirva
$contador = $_POST[“contador”];
for($i = 1; $i prepare($sql);
$inserta->execute();
}
Gracias por compartir la solución
$contador = $_POST[“contador”];
for($i = 1; $i prepare($sql);
$inserta->execute();
}
for($i = 1; $i prepare($sql);
$inserta->execute();
};
Buen día, antes de nada gracias por el aporte y por los comentarios.
Quería pedir un poquillo de ayuda.
El tema es que me gustaría que el formulario llevase un par de campos más a parte de los dinámicos, por ejemplo: nombre, apellido, email.
¿Cómo podría hacer esto y recuperar los valores de estos campos y los valores dinámicos?
Si utilizo este código me trae todas las variables POST pero la variable nombre, apellidos y email me las duplica.
foreach($_POST as $key => $value){
echo “$value”.””;
}
Esto es lo que trato de hacer, pero me duplica los 3 primeros valores (nombre, apellidos, email)
echo $_POST[“nombre”].””;
echo $_POST[“apellidos”].””;
echo $_POST[“email”].””;
foreach($_POST as $key => $value){
echo “$value”.””;
}
A ver si me podéis echar una mano. Muchas gracias.
Entre las comillas va un – br –
gracias por la nota.
Cada campo dinámico debe ser identificado de forma única. Por ello aprovecho el contador para nombrar cada campo. En tu caso podrías hacerlo de la forma: [input type=”text” name=contador.”_email”]
saludos
hola, disculpa tengo una duda, en que parte de form se coloca el contador.-?
Saludos hermis.
El contador se declara en el bloque javascript. Si descargas el código y revisas el js allí encontrarás la declaración al inicio. saludos
Hola, primero agradecerte el aporte.
Tengo un problema, y es que estoy usando este ejemplo para añadir dinámicante selects, que toman sus datos desde una bbdd. El problema está en que innerHTML reemplaza por y el select aparece vacío, estoy investgando y por más que miro no hay forma. Me puedes echar una mano? Gracias.
En el caso de usar selects debes armar primero su contenido y luego incrustarlos en el div dinámico.
Saludos
Excelente artículo, es exactamente lo que necesitaba, la explicación súper clara y el ejemplo del código extremadamente simple.
Muchas gracias.
Hola, soy nuevo programando. Pero quisiera saber como validar con JavaScript cada uno de los campos creados. Gracias
Buena pregunta, me parece que dará para una segunda parte de este artículo. En breve lo redactaré amigo.
Hola mi consulta es: ¿como se puede almacenar en la BD varios input a la vez?, e investigado pero no encuentro la solución ya que en casi todos los ejemplos es con un solo input
De antemano muchas graciass.
Cada input será enviado a por el formulario al ejecutar le get o post. Del lado del servidor podrás recorrer estos inputs y guardarlos en la base de datos.
Gracias por el dato. 😀
Muchas Gracias por la información 🙂
Es un gusto compartir. Saludos
Gracias por el código es justo lo que necesito, sin embargo aun no puedo hacer para almacenar los datos en una BDD, Podrías poner claramente como se hace?, por favor
He buscado por Internet y nada.
Saludos.
Almacenar los datos en la base de datos dependerá de la estructura de la tabla o tablas destino. Que te parece si aportas un poco más de información sobre tu problema y en base a ello buscamos la solución. Saludos.
hola, quisiera agregar un SELECT con informacion extraida desde una base de datos, como lo haria? Muchas Gracias
Hola, este script esta muy bueno para un proyecto que voy a comenzar a realizar, sin embargo he estado tratando de modificar el js para que cuando se presione Agregar campo de captura este input quede automaticamente en autofocus, y que al presionar una tecla por ejemplo enter o cualquiera, se agregue otro sin darle click nuevamente al link para agregar este nuevo campo. Sin embargo he estado bloqueado en esas dos funciones extras, podrias ayudarme con eso, gracias brother, muy bueno su tuto.