Javascript

Ξ 87 comentarios

Cómo añadir campos a un formulario dinámicamente

por Xabadu
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

  1. Un editor Web.
  2. 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:

Nombre Sitio Web Correo Electrónico

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:

 

Nombre Sitio Web Correo Electrónico

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 */:

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.

 

Actualización: Agregamos esto debido a las preguntas que nos han dejado en los comentarios, para quienes les pueda servir:

Para recoger los datos que envíen en ese formulario, deben considerar que los estamos enviando en arreglos (nombre[posicion], web[posicion] y correo[posicion]), por lo que al momento de rescatar sus datos en la página de destino (ya sea en POST o GET), deben recorrer estos arreglos y procesar cada dato.

¿Cómo recorrerlos? Esta es una manera muy básica de hacerlo (ejemplo en PHP, con un formulario enviado por POST. En GET es similar):

    /* Aquí la conexión a la BD */

    $nombre = $_POST['nombre'];
    $web = $_POST['web'];
    $correo = $_POST['correo'];

    $i = 0;

    foreach($nombre as $n) {
        mysql_query('INSERT INTO usuarios(usuario_nombre, usuario_web, usuario_correo) VALUES("'.$n.'", "'.$web[$i].'", "'.$correo[$i].'")');
        $i++;
    }

 

Recuerden que esto es una forma múy básica de hacerlo, a eso es necesario agregarle comprobaciones u optimizaciones que puedan servirles, pero ya es una base para partir.

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.

Comparte este tutorial

El culpable de todo esto

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.

En los barrios marginales se le conoce como: Xabadu

Comentarios en Facebook

87 Comentarios

  • como no consigo grabarlo bien te indico lo que he añadido al final de nuevaCelda.InnerHTML
    * Comilla simple
    % Comilla doblre
    onblur=* calcular(%+posicionCampo+%)*;

    Siento tanto follón ;(

  • Cuando agrego dentro de no funciona que puede ser?

  • no funciona cuando agrego nuevacelda.innerHTML=

  • Muy buenas.
    He estado viendo tu publicación y me ha parecido estupenda.
    De hecho, gracias a esto, lo he incluido en mi proyecto, cambiándole los nombres.

    Quisiera pedirte, si no es mucha molestia, que pusieras el código de como lo insertarías en la base de datos con al menos 3 inserciones.

    Muchas gracias de antemano.

  • Hola Xadabu, soy nuevo en esto.

    Como puedo agregar un select de manera dinámica, ya lo intente con el código que publicaste pero por más que lo intento solo muestra una de las opciones que pongo.
    El código que uso es el siguiente:

    nuevaCelda=nuevaFila.insertCell(-1);

    nuevaCelda.innerHTML=”<select name='estatus["+posicionCampo+"]' Inactivo Activo “;

    Podrías ayudarme por favor
    Un saludo y gracias.

  • como capturo con java los datos de los campos creados, para guardarlos en una bd?, asi como tal en php no lo puedo hacer con jsp

  • esa es la correcta forma de ingresar los datos a la base de datos? porque a mi no me funciona. Ayuda

1 7 8 9

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Gente linda que nos quiere

Donde mas estamos