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.

$(document).ready(function() {
  $('#btnDel').attr('disabled','disabled');
  $('#btnAdd').click(function() {
    var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
    var newNum = new Number(num + 1); // the numeric ID of the new input field being added

    // create the new element via clone(), and manipulate it's ID using newNum value
    var newElem = $('#input' + num).clone().attr('id', 'Add' + newNum);

    // manipulate the name/id values of the input inside the new element
    newElem.children(':last').attr('id', 'name' + newNum).attr('name', 'name' + newNum);

    // insert the new element after the last "duplicatable" input field
    $('#input' + num).after(newElem);

    // enable the "remove" button
    $('#btnDel').attr('disabled',false);

    // business rule: you can only add 10 names
    if (newNum == 10)
      $('#btnAdd').attr('disabled','disabled');
  });

  $('#btnDel').click(function() {
    var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
    $('#input' + num).remove(); // remove the last element

    // enable the "add" button
    $('#btnAdd').attr('disabled',false);

    // if only one element remains, disable the "remove" button
    if (num-1 == 1)
      $('#btnDel').attr('disabled','disabled');
  });

});

Y ahora el DOM:

<form id="testform">
   <fieldset id="input1" class="clonedInput">
      <label>Name</label>
      <input type="text" name="name1" id="name1" />
   </fieldset>
   <fieldset>
      <label>Need more fields?</label>
      <input type="button" id="btnAdd" value="+" />
      <input type="button" id="btnDel" value="-" />
   </fieldset>
</form>

41 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 •

        Muchas gracias por la ayuda, ya he podido solucionarlo y me funciona perfecto!!.
        Se puede hacer esto mismo para modificar los datos de una bases de datos?

      1. De nada Pedro :)

        No, este código no te permite modificar una base de datos.

    • 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.

    • Por Felipe •

    Muchas gracias por la ayuda, en verdad me sirvió de mucho. Solo que ahora tengo un problema. ¿Cómo le haría para que al clonar no tome los datos del textbox anterior?

    1. Hola Felipe, comprueba que los atributos id y name del elemento del formulario clonedInput coinciden con los definidos en el script. Es el error más común.

    • Por Francisco •

    En mi caso use radiobuttons, y puesto que todos los bloques de radios name deben ser diferente, se me ocurrio agregarle un random, ahora el problema es que no se como capturar el nombre de esa variable con post.

    tengo algo asi:

    Habra alguna manera de capturarlo con post?

    1. Hola Francisco,

      se me ocurre una manera sencilla, que te evitará enfrentarte a los identificadores aleatorios: puede crear una matriz con todos los valores, de manera que luego puedes leer esa matriz. Esto lo puedes hacer definiendo el atributo name de cada elemento de la siguiente manera: name="matriz[]".

      Puedes acceder a la matriz en $_POST['matriz'].

    • Por joel diaz •

    tengo dos select , el segunto depende del primero, y necesito duplicarlos a los dos y con su dependencia totalmente para cada uno ..

    • Por Juanjo •

    Hola, necesito esta funcionalidad para un formulario que tengo en Ionic, pero no consigo que me funcione tu código

    1. Hola Juanjo,

      para poder ayudarte necesitaría algún detalle más sobre lo que estás intentado hacer.

  4. El ejemplo me funciona bien, el problema es que al enviar el formulario, este me recoge solamente el primer campo :/

    1. Hola Felipe,

      revisa los valores que has usado para los atributos name e id con un inspector de código en el navegador: el 99% de las veces los problemas vienen de errores en la nomenclatura.

    • Por juan

    Hola como va, tengo un problema con el código. Me deja agregar solamente un campo y no me deja eliminarlo despues. Los id y todo eso esta perfecto, me podías decir con que librería de jquery esta echo? gracias

    1. Hola Juan, no utiliza ninguna librería de jQuery, únicamente jQuery.

    • Por Amarok •

    Hola, el script demo me corre muy bien, sólo que necesito clonar 4 cajas de texto y la primera me la pone muy bien nombre1, nombre2, nombre3… etc. pero las demás se quedan como apellido1, apellido1, apellido1… etc. qué puedo hacer en este caso?
    De antemano, muchas gracias.

    1. Hola Amarok,

      tienes que añadir una línea para generar los atributos id y name de los nuevos elementos «apellido», similar a la que tienes para los nombres. Algo así (aunque puede cambiar en función de los identificadores que estés usando):

      newElem.children(':last').attr('id', 'apellido' + newNum).attr('name', 'apellido' + newNum);
    • Por Eduardo

    Hola estimado, espero me puedas ayudar tengo la siguiente duda:

    Tengo un listado de pacientes y 3 formularios que se deben llenar por cada uno, entonces lo que deseo es que cuando se aperture un paciente se generen los formularios en 3 opciones y cuando de clic en una opcion me muestre el formulario por ejemplo 1 con los datos basicos del paciente.

    Opciones
    Nombres y Apellidos
    Fecha de registro
    PA Inicial
    PA Final
    Peso Inicial
    Peso Final
    N° de Maquina
    DNI

    Opciones
    Nombres y Apellidos
    Fecha de registro
    PA Inicial
    PA Final
    Peso Inicial
    Peso Final
    N° de Maquina
    DNI

    En la parte que dice opciones estoy cargando 3 icons de fichas para cada ficha medica

    «0»=>’idparteenfermeria.’)»>

    lo que quiero es que cunado abra me muestre el formulario que cree y salgan los datos del paciente y bueno rellnearlo y se registre

    1. Hola Eduardo,

      si entiendo bien lo que preguntas, tu duda no está relacionado con clonar campos de un formulario de manera dinámica, que es el tema de este artículo. Este artículo es bastante concreto, para hacer lo que necesitas quizás te venga bien consultar un tutorial de cómo usar formularios o recurrir a algún servicio que te permita poner en funcionamiento un formulario sin necesidad de pogramarlo tú mismo.

    • Por Ernesto •

    El charly se murio porque su pagina ya no existe ;)

    1. Cierto Ernesto! Gran problema la desaparición de páginas web… Siempre nos quedará archive.org.

  5. Muchas gracias que si me ah funcionado

Dejar un comentario

*
*

 

No hay trackbacks