Plugin jQuery para añadir campos en un formulario

En este artículo vamos a publicar una de las utilidades más solicitadas en Javascript, que consiste en un formulario que puede crecer dinámicamente en número de campos. Es decir, un formulario HTML que tiene una opción para que el visitante pueda añadir nuevos campos, dejando todo el procesamiento y la modificación de la página web del lado del cliente.

La utilidad que estamos relatando la haremos con el framework Javascript jQuery, que nos facilitará sensiblemente las cosas gracias a la cantidad de librerías útiles que contiene, para hacer este y cualquier otro script del lado del cliente. Además, crearemos todo el código con la estructura de plugin jQuery, para que cualquier persona pueda reutilizar esta utilidad en sus páginas web.

En artículos anteriores del Manual de jQuery ya explicamos muchas cosas que debemos de conocer sobre los plugins, con lo que recomendamos la lectura para poder entender el código que vamos a ver enseguida. Concretamente, recomendamos la lectura de los artículos donde comenzamos a tratar los plugins en jQuery.

Código HTML del formulario

La idea de este plugin es muy simple, pues únicamente necesitamos un pequeño sistema para añadir elementos HTML en la página bajo demanda del cliente. Tendremos un enlace en el formulario con el texto "Más campos" y al pulsarlo, simplemente se inyectará el código HTML para mostrar un campo nuevo en el formulario.

Entonces tendremos el código de un formulario, que contendrá ese enlace "mágico" que inserta campos en el formulario. Es indiferente como realizamos el formulario, es decir, pondremos los campos que necesitemos, ahora bien, los campos que vamos a insertar serán todos del mismo tipo, para facilitar las cosas.

Veamos el código HTML del formulario que necesitaremos para crear esta funcionalidad.

<form>
<p>
Nombre:<br>
<input type="Text" name="nombre">
</p><p>
Edad:<br>
<input type="Text" name="Edad">
</p><p>
Compra:<br>
<input type="Text" name="compra1">
<p>
<a href="#" id="mascampos">Más campos</a>
</p><p>
<input type=submit value="enviar">
</p>
</form>

Como se puede ver, es un formulario bastante simple, pero como decía, cada desarrollador pondrá los campos que necesite. La única cosa que deberemos tener con certeza es el código del enlace que insertará los campos al hacer clic sobre él. Fijémonos que ese enlace tiene un identificador para luego acceder a él desde jQuery.

Plugin para añadir campos en formulario

Ahora podemos ver el código del plugin jQuery que nos ocupa.

jQuery.fn.generaNuevosCampos = function(etiqueta, nombreCampo, indice){
   $(this).each(function(){
      elem = $(this);
      elem.data("etiqueta",etiqueta);
      elem.data("nombreCampo",nombreCampo);
      elem.data("indice",indice);
      
      elem.click(function(e){
         e.preventDefault();
         elem = $(this);
         etiqueta = elem.data("etiqueta");
         nombreCampo = elem.data("nombreCampo");
         indice = elem.data("indice");
         texto_insertar = '<p>' + etiqueta + ' ' + indice + ':<br><input type="text" name="' + nombreCampo + indice + '" /></p>';
         indice ++;
         elem.data("indice",indice);
         nuevo_campo = $(texto_insertar);
         elem.before(nuevo_campo);
      });
   });
   return this;
}

Tal como hemos desarrollado este plugin, para funcionar debe recibir tres parámetros. El primero de ellos, "etiqueta", sirve para etiquetar el nuevo campo que se va a crear, osea, contendrá un texto que pondremos al lado de los campos que se van a crear dinámicamente. El segundo parámetro, "nombreCampo", sirve para darle un nombre interno para ese campo, que colocaremos en el atributo name del elemento INPUT HTML. El parámetro "indice" sirve para modificar el nombre del campo creado incluyendo un índice, de modo que ningún campo creado tenga el mismo nombre, lo que podría ser un problema en nuestro formulario. Este índice será numérico y se incrementará en cada campo que se inserte, de modo que sea distinto en cada campo nuevo generado.

Entonces, dentro del plugin tenemos que hacer un par de cosas. Primero almacenar en el elemento HTML del enlace todos los datos que necesitamos para crear los campos, es decir, todos los datos que se enviaron como parámetros al llamar al plugin. Luego tendremos que implementar un evento clic sobre el enlace, que se encargará de realizar todas las acciones para generar dinámicamente e insertar el campo en el formulario.

El evento "click" del enlace tendrá que recuperar todos los datos almacenados en el enlace y luego generar el HTML del campo a insertar. Se generan los elementos por medio de la función jQuery y luego se insertan mediante el método before() del elemento enlace, para que el nuevo campo se coloque justo antes del enlace.

Para llamar al plugin utilizaremos un código Javascript parecido al siguiente:

$(document).ready(function(){
   $("#mascampos").generaNuevosCampos("Compra", "compra", 2);
});

Para ver y entender mejor este código se puede acceder al ejemplo en marcha, donde podremos pulsar el enlace para generar nuevos campos. Podremos ver como los campos que se generen tienen sus nombres (atributos name del campo input) únicos, para que se puedan acceder correctamente cuando se envíe el formulario y se reciban los datos.

Ver el ejercicio en marcha en una página aparte.