Autonomía digital y tecnológica

Código e ideas para una internet distribuida

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

Imago voragine.net
[actualizado el ]

El siguiente script de jQuery incorpora dos botones a un formulario HTML que permiten añadir y eliminar campos a voluntad. Lo encontré en el recomendable blog de Charlie Griefer. En la página de Charlie se puede probar una demo.

Y ahora el DOM:

21 comentarios

    • Por Ángel

    Muchas gracias por compartirlo, lo leí aquí hace tiempo y justo hoy andaba buscando una solución más o menos semejante.
    Un saludo!

    1. De nada, Ángel. Gracias a ti por leernos.

  1. Muchas gracias por compartirlo, quisiera saber como capturar los valores de este formulario dinamicamente en un php

    1. Hola César, para capturar los valores del formulario con PHP puedes consultar este otro tutorial: Cómo pasar variables de una página a otra en una web con PHP.

  2. Hola buen día, el artículo es muy interesante, me gustaría saber ahora como puedo guardar los datos que se van añadiendo en el formulario por ejemplo en un campo de una tabla en la base de datos.

    1. Hola,

      lo que preguntas está fuera de la temática de este tutorial. Además depende mucho del lenguaje y el tipo de base de datos que estés usando.

    • Por Luis Uriel •

    Hola, una pregunta que nombre de variables tienen los inputs dinamicos? apenas estoy empezando con js y no se que nombre de variable le pone a los input para extraer su contenido en una pagina pho

    1. Hola Luis,

      en la línea 11 del código puedes ver cómo se generan los nuevos elementos y cómo se nombran: cada nuevo elemento se nombra como name1, name2, name3…

    • Por Patricia •

    Hola muchas gracias por el script! Estoy un poco verde con jquery, y tras copiar tu código en una página php, no funciona, aparece todo como debe pero los botones no llegan a hacer nada…. Supongo que me equivoco al añadir la parte de las funciones…. La estoy poniendo dentro de una etiqueta …. pero no se si es así, o tal vez sólo tengo que añadir algun link de jq????

    1. Hola Patricia, comprueba que los atributos id y name de los elementos del formulario (btnAdd, btnDel, clonedInput) coinciden con los definidos en el script. Es el error más común.

      Y asegúrate de cargar la librería jQuery antes de cargar el script, claro ;)

    • Por Gabriel •

    Buen día, quisiera saber si estos nuevos input se podrán enviar mediante el método post a otra página PHP con el fin de usar sus contenidos allá para poder luego hacer con ellos lo que uno necesite, gracias!

    1. Hola Gabriel, sí, al quedar dentro de la estructura del formulario se envían con el resto de campos.

    • Por Rodrigo •

    Una vez añadidos los nuevos imput como puedo sacar su valor con jquery. Al ser añadidos dinamicamente el dom no me los reconoce por lo que no podria hacer $(‘#name4’)val();

    1. Buena pregunta Rodrigo. Si no funciona efectivamente porque no te los reconoce (no lo he probado) puedes recargar la parte de la página que necesites con AJAX.

  3. el ejemplo esta de la verga pero el Blog de Charlie, su ejemplo esta muy bien, entonces en esta seccion para que puta madre ponen ejemplo de la verga que no sirve!

    • Por jesus

    copie y pegue tal cual el ejemplo pero solo me agrega un campo y no deja eliminarlo, que puede estar pasando ? gracias por tu respuesta de antemano

    1. Hola Jesus, comprueba que los atributos id y name de los elementos del formulario (btnAdd, btnDel, clonedInput) coinciden con los definidos en el script. Es el error más común.

    • Por Pedro •

    Perdonad, pero a mi no me funciona:

    Copio y pego el código en un archivo php, y el botón de “borrar nombre” no está activado.

    1. Hola Pedro,

      los errores más comunes a la hora de implementar este código se producen por falta de correspondencia en los nombres de las clases que se usan para lanzar los eventos del script jQuery.

      Para detectar posibles errores puedes usar la consola del navegador, Firefox o Chrome por ejemplo, pulsando “control mayúscula i” o con el menú del botón derecho del ratón, seleccionando “inspeccionar elemento”.

    • Por Pedro •

    Por favor, poned bien el código. No es igual que el ejemplo que muestra luego.

    • Por Alfonsito •

    No intenteis probar esto, ya que no funciona.

    Ni el ejemplo haciendo Copypaste funciona.

Dejar un comentario

*
*

 

No hay trackbacks