Blog de , aka skotperez

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

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>
      <inputtype="button" id="btnAdd" value="+" />
      <input type="button" id="btnDel" value="-" />
   </fieldset>
</form>

8 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…

Dejar un comentario

*
*

 

No hay trackbacks