Cómo añadir campos a un formulario dinámicamente
En CLH, en nuestro afán de cubrir hasta los últimos posibles detalles en cada temática, hemos hablado en varias ocasiones de los formularios Web. Ya sea estilizándolos, validándolos por Javascript, añadiendo Calendarios o incluso haciéndolos, esto se debe a lo que siempre remarcamos, que es su importancia dentro de un sitio que pretenda interactuar con sus visitantes.
Pues bien, hoy añadimos una nueva página a las numerosas lecciones al respecto. En esta ocasión, les enseñaremos a añadir campos al formulario de forma dinámica, para permitirle a un usuario en particular definir cuantos datos de un tipo quiere ingresar.
El detalle, como siempre, después del salto.
Cómo añadir campos a un formulario dinámicamente
Antes de partir, una pequeña explicación:
¿Qué haremos?
Lo que haremos, será añadir una pequeña funcionalidad a nuestro formulario, para que mediante un botón, el usuario pueda añadir más campos para ingresar un tipo de dato en particular y así definir la cantidad que estime conveniente. Esto lo haremos mediante un formulario en HTML y un código en Javascript, además de un poco de PHP para procesar el formulario.
¿Por qué hacerlo?
Es una muy buena pregunta, que tiene una respuesta así de buena. Cuando hacemos un formulario, en algunas ocasiones nos presentamos con la problemática de que para una información en particular, el número de datos a ingresar puede ser relativo.
Por ej: Si le queremos preguntar al usuario el nombre de sus hermanos o familiares, ¿Cómo definimos cuantos tendrán?. Claro, podríamos irnos a la segura y poner 10 o 15 campos, pero si el usuario solo tiene 1 hermano, estaríamos manejando una gran cantidad de datos innecesariamente.
Por esto es mejor darle el control al usuario y permitirle añadir más campos para el mismo dato según estime conveniente.
Implementos Necesarios
- Un editor Web.
- Idealmente un hosting que pueda ejecutar archivos PHP.
Con eso claro, vamos, manos a la obra:
Procedimiento
1.- Lo primero que haremos, será crear nuestro formulario con los datos que querremos que el usuario ingrese. Si tienen dudas sobre como hacerlo, les recomendamos leer este tutorial donde hemos cubierto el proceso por completo.
2.- Una vez que hemos creado nuestro formulario debemos hacer los ajustes para preparar nuestros campos dinámicos. Para eso nos dirigimos a donde están este campo (dentro de la celda, o entre las etiquetas td y /td si hemos insertado una tabla dentro del formulario, lo que es recomendable) y ahí lo que haremos será crear otra tabla en donde dejaremos los campos dinámicos. Así nos aseguraremos que sin importar cuantos campos se agreguen, ni el formulario ni la tabla principal pierdan la forma, así que dentro de la celda, agregaremos el código correspondiente. En este caso, como demostramos con un formulario para agregar nuevos usuarios añadiremos:
<table id=”tablaUsuarios”>
<tr’>
<td width=”175″>Nombre</td>
<td width=”175″>Sitio Web </td>
<td width=”100″>Correo</td>
<td width=”100″>Acciones</td>
</tr>
</table>
Lo que hemos hecho aquí es simplemente añadir una fila con 3 celdas, en las que se indica el nombre de un usuario, su sitio Web y su correo. Ojo que solo agregamos las celdas con los títulos. Los campos de texto los agregaremos en el siguiente paso para ver como lo hacemos dinámicamente.
3.- A continuación, en una nueva fila de la tabla principal que está en el formulario, agregaremos y alinearemos a la derecha un botón para agregar nuevas filas:
<td align=“right”>
<input type=“button” onClick=“agregarUsuario()”
value=“Añadir usuario” >
</td>
Con esto, hemos creado una celda alineada a la derecha y hemos añadido un botón al cual se le ha asignado un atributo onClick, es decir, cuando se pulse este botón, se ejecutará una acción, en este caso, llamará a una función agregarUsuario() en Javascript que ya definiremos.
4.- Como describimos en el paso anterior, haremos una llamada a una función en Javascript que se encargará de añadir un campo cada vez que pulsemos el botón. Así que entre las etiquetas head y /head, agregaremos el siguiente código. La explicación, como siempre, en negrita, cursiva y entre /* y */:
<script language=”javascript” type=”text/javascript”> /* Abrimos etiqueta de código Javascript */
/* Partimos por definir una variable llamada posicionCampo. Esta variable servirá como índices para marcar cuantos campos se han agregado dinámicamente. La inicializamos en 1, ya que la primera llamada ocurrirá cuando no hayan campos agregados */
var posicionCampo=1;
/* Declaramos la función agregarUsuario( ) */
function agregarUsuario(){
/* Declaramos una variable llamada nuevaFila y a ella le asignamos la recuperación del elemento HTML designado por el id tablaUsuarios. En este caso, la tabla en la que manejamos los campos dinámicamente y llamamos a la función insertRow para agregar una fila */
nuevaFila = document.getElementById(“tablaUsuarios”).insertRow(-1);
/* Asignamos a la propiedad id de nuevaFila el valor de posicionCampo, que inicializamos en 1 */
nuevaFila.id=posicionCampo;
/* Luego en otra variable llamada nuevaCelda, agregaremos una celda a la tabla, mediante la función insertCell */
nuevaCelda=nuevaFila.insertCell(-1);
/* Con la celda creada, insertamos dinámicamente un campo de texto, el cual almacenaremos en un array llamado nombre, con una posición equivalente a la variable posicionCampo. Una vez terminado, repetimos la acción para el sitio Web y correo, asignando al array respectivo */
nuevaCelda.innerHTML=”<td><input type=’text’ size=’15′ name=’nombre["+posicionCampo+"]‘ ></td>”;
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML=”<td> <input type=’text’ size=’10′ name=’web["+posicionCampo+"]‘ ></td>”;
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML=”<td> <input type=’text’ size=’10′ name=’correo["+posicionCampo+"]‘ ></td>”;
/* Finalmente añadimos una última celda para las acciones y ahí agregamos un botón llamado Eliminar, el cual al ser presionado (definiendo la propiedad onClick), llamará a una función eliminarUsuario, pasando como parámetro la fila correspondiente */
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML=”<td><input type=’button’ value=’Eliminar’ onclick=’eliminarUsuario(this)’></td>”;
/* Incrementamos el valor de posicionCampo para que empiece a contar de la fila siguiente */
posicionCampo++;
}
/* Definimos la función eliminarUsuario, la cual se encargará de quitar la fila completa del formulario. No es necesario hacer modificaciones sobre este código */
function eliminarUsuario(obj){
var oTr = obj;
while(oTr.nodeName.toLowerCase()!=’tr’){
oTr=oTr.parentNode;
}
var root = oTr.parentNode;
root.removeChild(oTr);
}
/* Cerramos el código Javascript */
</script>
5.- Y listo. Ahora podemos agregar campos dinámicamente y enviarlos a través del formulario, almacenando los datos en arrays, lo cual hará más sencillo de procesar y rescatar después mediante PHP o algún otro lenguaje dinámico, para manipular esos datos y hacer con ellos lo que necesitemos, como insertar en una BD o simplemente desplegar por pantalla.
Como siempre, les recordamos que este tutorial ha sido:
Esperamos que haya sido de utilidad para Uds.
Cualquier duda que tengan, los invitamos a dejarnos un comentario en el área habilitada a continuación.
Muchas gracias por leer y será hasta una próxima oportunidad.
Staff CLH
Tutoriales relacionados:
- Cómo validar campos de un formulario mediante Javascript
- Cómo crear un formulario de contacto – Versión 2.0
- Cómo mejorar tu sitio Web mediante JavaScript
- Cómo estilizar los formularios de nuestros sitios Web
- Cómo confeccionar formularios en PDF
(1 votos, promedio: 5.00 de 5)
Loading ...
Escrito por Xabadu
Las tardes gloriosas de domingo y las grandes ovaciones a estadio lleno, no son algo extraño para Xabadu. Luego de ser descubierto a los 4 años en un partido de barrio por los ojeadores del gran Aviación F.C., sacudió el mercado nacional al ser traspasado en $500 pesos chilenos (1 USD) y 3 coca colas al renombrado Estrella Blanca de Lolol. Luego de una impresionante carrera por equipos como Lozapenco, Santa Cruz, Deportivo Lago Chungará y una incursión en la 3a división del futbol de Kazajstan, su record imbatible hasta la fecha de 1257 goles en 20 partidos lo llevo a ser elegido como uno de los arqueros más recordados en la historia pelotera nacional. Una lesión en el colmillo superior derecho lo llevó al retiro el año 2003, pero está de vuelta y sin duda que su jerarquía y experiencia internacional será un gran aporte.
37 Comentarios a “ Cómo añadir campos a un formulario dinámicamente ”
Comenta
hola, lo que pasa es que tengo un pequeño problema con mi codigo, lo que pasa es que me agrega campos normalmente, muy bonito y todo. pero a la hora de guardarlos no me guarda los campos agregados automaticamente, solamente me guarda la primera fila.
sera que me podrian colaborar con esto.
estoy trabajando la bd en mysql.
de antemano nuchas gracias por su colaboracion.
@yurany flaka: Recuerda que los distintos campos que se agregan se guardan en un arreglo, por lo que al insertar, debes hacer un ciclo que recorra cada posición de los arreglos y vaya insertando.
Si tienes problemas, puedes mostrarnos tu código para ayudarte.
Saludos!
Muchas gracias fue de mucha ayuda.
Hola,
yo he añadido campos dinámicamente, pero me ocurre lo mismo ,sólo obtengo los campos que aparecen inicialmente.
Lo que pretendo hacer es recoger el valor de estos campos de texto en variables php ($vble=$_GET['input text']) para luego acceder a base de datos con mysql. Pero no sé cómo obtener los valores de los campos añadidos dinámicamente ni cómo saber el número de campos que he añadido. Podríais ayudarme?
Muchas gracias
@Rupi: Los valores de los campos se añaden a arreglos. En el ejemplo se utilizan los arrays: nombre, web y correo. Así que debes recorrer aquellos.
Para saber cuantos elementos agregaron finalmente, puedes probar con la función count, la cual te dirá cuantos elementos tiene un array si haces count(nombredelarray).
Saludos
Muchas gracias por tu ayuda Xabadu, ya conseguí recorrer el arreglo.
Ahora tengo otra duda, resulta que tengo una página con un formulario de búsqueda y querría que al hacer las búsqueda me mostrara los resultados obtenidos debajo del formulario. Mi problema es que me los muestra al principio de la página y no debajo. Podriais ayudarme??
Muchas gracias
@RUPI: En teoría añadiendo el código donde despliegas los resultados después del formulario deberías lograr lo que buscas.
Si pones tu código acá puedo echarle una mirada y ayudarte en detalle.
Saludos!
Hola Xabadu:
Aquí pego mi código: como ves tengo varios combobox que se cargan con el resultado una select. Luego tengo un botón “buscar” que llama a una funcion buscarBP, y que lo único que hace es hacer echo de las variables selecciondas, al mostrar estas variables me lo muestro todo al principio del formulario y no debajo.
Muchísimas gracias por adelantado:
<style type=”text/css”>
<!–
.Estilo1 {color: #F0F0F0}
–>
</style>
<?
if($_GET['accion']==”Buscar”)
{
buscarBP();
}
?>
<form id=”form1″ name=”form1″ method=”get” action=”">
<table width=”1055″ border=”0″>
<tr>
<td colspan=”3″><table width=”1182″ border=”0″>
<tr>
<td width=”512″><label>Organización / Empresa
<select name=”organizacionBP” id=”organizacionBP”>
<?
$sql=”SELECT * FROM `buenaspracticas_b` ORDER BY `id` ASC”;
$tabla=mysql_query ($sql) or die (“Error, nuevoIND-select-2″);
?>
<option value=”"> </option>
<?
while($bOrg = mysql_fetch_array($tabla)) {
?>
<option value = “<? echo $bOrg['id']; ?>” <? if($_GET['organizacionBP'] == $bOrg['id']){?> “selected” <? } ?>> <? echo $bOrg['empresa']; ?></option>
<?
}
?>
</select>
</label></td>
<td width=”660″><label>Cuestionario
<select name=”cuestionarioBP” id=”cuestionarioBP”>
<?
$sql=”SELECT * FROM `cuest_catalogo` ORDER BY `id` ASC”;
$tabla=mysql_query ($sql) or die (“Error, nuevoIND-select-2″);
?>
<option value=” “></option>
<?
while($bCuestionario = mysql_fetch_array($tabla)) {
?>
<option value =”<? echo $bCuestionario['id']; ?>”> <? echo $bCuestionario['nombre']; ?></option>
<?
}
?>
</select>
</label></td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td width=”321″><label>Código BP
<select name=”codigoBP” id=”codigoBP”>
<?
$sql=”SELECT * FROM `buenaspracticas` ORDER BY `id` ASC”;
$tabla=mysql_query ($sql) or die (“Error, nuevoIND-select-2″);
?>
<option value=” “></option>
<?
while($bCode = mysql_fetch_array($tabla)) {
?>
<option value = “<? echo $bCode['id']; ?>”> <? echo $bCode['codigo']; ?></option>
<?
}
?>
</select>
<input type=”hidden”
</label></td>
<td width=”289″><label>Nombre BP
<select name=”nombreBP” id=”nombreBP” onfocus=”">
<?
$sql=”SELECT * FROM `buenaspracticas` ORDER BY `id` ASC”;
$tabla=mysql_query ($sql) or die (“Error, nuevoIND-select-2″);
?>
<option value=” “></option>
<?
while($bNombre = mysql_fetch_array($tabla)) {
?>
<option value = “<? echo $bNombre['nombre']; ?>”> <? echo $bNombre['nombre']; ?></option>
<?
}
?>
</select>
<input type=”hidden” name=”nombres” value=”<? echo $_GET['nombreBP']; ?>”>
<input type=”hidden” name=”page” value=”buenaspracticas” />
<input type=”hidden” name=”pageBP” value=”visorBP” />
</label></td>
<td width=”564″><label>Indicador Económico
<select name=”indicadorBP” id=”indicadorBP”>
<option selected=”selected”> </option>
<?
$sql=”SELECT * FROM `cuest_indicadores` ORDER BY `id` ASC”;
$tabla=mysql_query ($sql) or die (“Error, nuevoIND-select-2″);
?>
<?
while($bIndicador = mysql_fetch_array($tabla)) {
?>
<option value = “<? echo $bIndicador['id']; ?>”> <? echo $bIndicador['nombre']; ?></option>
<?
}
?>
</select>
</label></td>
</tr>
<tr>
<td colspan=”3″> </td>
</tr>
<tr>
<td colspan=”3″>Busquedas sugeridas por el sistema
<select name=”opcionbusquedaBP” id=”opcionbusquedaBP”>
<option selected=”selected”> </option>
<option>Indicador peor valorado</option>
<option>Área de la cadena de valor</option>
<option>Stakeholder</option>
</select></td>
</tr>
<tr>
<td colspan=”3″> </td>
</tr>
<tr>
<td colspan=”3″><label>
<div align=”left”>
<input type=”submit” name=”accion” id=”button” value=”Buscar” />
</div>
</label></td>
</tr>
</table>
</form>
<?
function buscarBP(){
$empresa=$_GET['organizacionBP'];
$cuestionarioBP=$_GET['cuestionarioBP'];
$codigo=$_GET['codigoBP'];
$nombre=$_GET['nombreBP'];
$indicador=$_GET['indicadorBP'];
settype($indicador,integer);
echo $indicador;
$busqueda=$_GET['opcionbusquedaBP'];
echo ‘tururu’;
echo $busqueda;
echo $nombre;
echo $codigo;
echo $empresa;
echo $asignacion1;
echo $asignacion2;
echo $asignacion3;
echo $bcuestionario;
echo $indicador;
echo “<hr>”;
$sql=”SELECT * from buenas_practicas_b WHERE `nombre` = ‘$nombre’”;
}
@RUPI: A pesar de que tienes la función codificada al final (esto en particular da lo mismo donde la ubiques), los resultados se desplegarán en pantalla de acuerdo al lugar del código donde realices la llamada a la función.
En tu caso, haces la llamada al principio cuando verificas el contenido pasado por URL, por ende los echo se ejecutan en ese lugar. Si quieres que los resultados se desplieguen en otro lugar, debes mover el llamado a la función.
Saludos!
Hola de nuevo Xabadu,
tengo un nuevo problema. He creado dos combobox de forma que al seleccionar elementos en el primero los paso al segundo y necesito leer todos los elementos que se pasaron al segundo sin tener que seleccionar ninguna. Esto necesito hacerlo en php, porque con los datos obtenidos y otros de otras cajas de texto hago un INSERT en base de datos.
Sólo consigo leer las opciones del segundo combo cuando las selecciono.
Podrías ayudarme?
Muchas gracias,
Un saludo
Hola Xabadú,
necesito cargar un archivo en el servidor, estoy utilizando el método “get” en el formulario. Es posible utilizando este método. El input type=”file” se llama caso_file y he intentado adapar código que he encontrado pero cómo verás no sale nada.
$casosFileBP=$_GET['caso_file'];
$server_dir=”http://localhost/alwe/images”;
$uploadreal1=$FILES['caso_file']['name'];
echo “name: “.”$uploadreal1″;
if (! $casosFileBP) {
echo “Archivo no especificado.\n”;
}
$upload_dir = “$server_dir”;
$uploadtemp1 = $casosFileBP;
$original = “$uploadtemp1″;
$file =”$uploadreal1″;
$copyfile = “$upload_dir/$file”;
$copiado=copy($uploadtemp1,$copyfile);
Podrías ayudarme por favor?
Hola,
Excelente tutorial!!!!!
Quisiera saber eso si como puedo agregar selectores desplegables o dropdown que tomen los valores desde una base de datos Mysql.
Muchas Gracias.
@Rodrigo: Te recomendamos revisar la categoría PHP donde hemos realizado un tutorial de listados dinámicos desde una base de datos MySQL que puedes combinar con esto.
Saludos!
Gracias Xabadu, voy a ver el tutorial que mencionas.
Pero por mientras de todas maneras no puedo lograr que me agrege select con las distintas opciones, es decir, con opciones que están definidas en el código no tomadas desde una base de datos.
Aqui en vez de <input …..> deberia ir
Pero no me funciona…????
¿Alguna idea?
Muchas Gracias,
Rodrigo
@Rodrigo: Revisando tu código no pareciera haber problemas, pero investigaré al respecto. Por lo pronto te recomiendo probar cambiando el nombre del select a nombre, tal como el input text y el tamaño de la lista, quizás por ahí vaya el problema.
Saludos!
hola tengo un problema para recuperar los datos con asp
usando el codigo de java que tienes para agregar los campos dinamicamente.
como puedo recorrer el array y pasarlo a asp para poder guardar eso en una base de datos en access
problema resuelto con
For Each Item in Request.Form
Response.Write Item & ” valor-> ” & Request(Item) & “<BR>”
Next
gracias
Salu2, muy bueno el tutorial, los felicito, tengo una duda, si yo hago el envio de los formularios con un POST a otra pagina como recibo ese array??? necesito esa ayuda…!!! Gracias
@samper: Los arrays los recibes creando una variable y asignandola mediante POST, de la siguiente forma (considerando el ejemplo del tutorial):
$primer_nombre=$_POST["nombre[posicion]“];
Saludos!
ya va jiji que no estoy entendiendo, si con el javascript yo estoy creando arrays como recibo los datos en la otra pagina, se que tengo que recorrerlo pero no entiendo como envio y como los recibo…
@samper: Los arrays se envían automáticamente a través del formulario bajo esa estructura: nombredelarray[posicion] y en cada posicion va guardado uno de los datos que vas añadiendo dinámicamente. Luego, en la página de recepción del formulario asignas los datos con lo indicado anteriormente.
Si tienes dudas sobre este proceso, te recomendamos revisar nuestra categoría PHP donde hemos explicado más a fondo este proceso.
Saludos!
Xabadu no tienes un demo que me puedas enviar a mi email? para saber como es el manejo?
@xabadu he estado buscando informacion y nada que encuentro, podrias ayudarme por favor?
@Xabadu: Muchas gracias por el tutorial es excelente. Y también veo la paciencia y dedicación que tienes para responder a todos los que te consultan (aunque la pregunta sea repetida ;P )
@Rodrigo: No sé si esto te va a ayudar pero de todas maneras lo comento:
Los campos INPUT, SELECT, etc. tienen 2 atributos particulares: name y id. Por lo general, solemos identificar a estos campos en el atributo name. Y nos olvidamos del id.
En IE, el método getElementById busca en ambos atributos name y id.
Pero MF, este método solo busca en aquellos campos con el atributo id.
Intenta usando el atributo id en tu SELECT con el mismo nombre que name.
Slds!
Xabadu muchísimas gracias por la información.. fue muy util tu aporte para mi..
disculpa, antes que nada muy bueno el codigo. quisiera hacerte una consulta. coloque la funcion de tal forma que al seleccionar un campo de un selectlist este me cree las filas, sin embargo al intentar darle un valor al campo este no lo toma. Ejemplo:
nuevaCelda.innerHTML=”<td><input type=’text’ size=’15′ id =’codigo_producto["+posicionCampo+"]‘ name=’codigo_producto["+posicionCampo+"]‘ ></td>”;
document.form1.codigo_producto[1].value=”1″;
Que piensas que podria estar pasando alli? gracias nuevamente.
buenas exelente tutorial,pero tengo un problema si fueran tan amables de ayudarme se los agrasederia mucho
dejo el codigo para ver si me puden ayudar
bueno lo que pasa es que copie el codigo tal cual pero no me resulta
gracias
<html>
<head>
<script language=”javascript” type=”text/javascript”>
var posicionCampo=1;
function agregarUsuario(){
nuevaFila = document.getElementById(“tablaUsuarios”).insertRow(-1);
nuevaFila.id=posicionCampo;
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML=”<td><input type=’text’ size=’15′ name=’nombre["+posicionCampo+"]‘ ></td>”;
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML=”<td> <input type=’text’ size=’10′ name=’web["+posicionCampo+"]‘ ></td>”;
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML=”<td> <input type=’text’ size=’10′ name=’correo["+posicionCampo+"]‘ ></td>”;
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML=”<td><input type=’button’ value=’Eliminar’ onclick=’eliminarUsuario(this)’></td>”;
posicionCampo++;
}
function eliminarUsuario(obj){
var oTr = obj;
while(oTr.nodeName.toLowerCase()!=’tr’){
oTr=oTr.parentNode;
}
var root = oTr.parentNode;
root.removeChild(oTr);
}
</script>
<title>Documento sin título</title>
</head>
<body>
<form id=”form1″ name=”form1″ method=”post” action=”">
<table id=”tablaUsuarios”>
<tr>
<td width=”175″>Nombre</td>
<td width=”175″>Sitio Web</td>
<td width=”100″>Correo</td>
<td width=”100″>Acciones</td>
</tr>
<td align=“right”>
<input type=”button” onClick=”agregarUsuario()”
value=”Añadir usuario” >
</td>
</table>
</form>
</body>
</html>
@dario: Ojo con las comillas. En comentarios de más arriba ha sucedido lo mismo.
Saludos!
gracias xabadu tenias razon,ya he arreglado el problema
, seguira viendo tu toriales estan muy geniales
Tengo el problema de que agrego campos y despues que recibo las variables, no existen, osea no las envia. He leido que recorra el arreglo pero en PHP si recorro el arreglo, pero esta vacio, osea que el formulario no esta enviando los campos: ¿Que puedo hacer?, me gustaría que te pusieras en contacto para explicar mas a detalle