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:

10 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 ;)

Dejar un comentario

*
*

 

No hay trackbacks