Plugin jQuery para añadir campos en un formulario

  • Por
Creamos un plugin con jQuery que sirve para añadir campos en un formulario HTML bajo solicitud del cliente.
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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

averbner

05/1/2012
Consulta.
Lo que estoy necesitando es que en vez de agregar un campo texto, un select, pero que se completa con los resultados de una tabla. No lo puedo hacer andar !!!

None

04/5/2012
Ayuda
Tengo el mismo problema, quiero hacerlo con un select, podrias ayudarnos, pero tambien como inserto puedo obtener esos valores si no se sabe cuantos va a agregar? Espero puedas ayudarme. Gracias.

rbelmont

07/5/2012
Ayuda
Hola, me parece bastante bien el codigo, justo lo que necesito, realice la adecuacion para utilizarlo y no tuve exito, al copiar el codigo completamente y realizar pruebas desde mi pc, no hace nada, oprimo el enlace de "mas campos" y sigue el formulario tal cual, que podria ser?

keap

12/5/2012
validar campos dinamicos
Cómo seria si al momento de darle enviar al formulario yo quisiera validar que todos los campos que se generaron dinamicamente se hayan llenado?

Carlos

24/5/2012
Plugin Jquery para añadir campos en un formulario
Saludos;
Tomando como inicio un código para agregar formulario dinámicamente, lo modifique para que se pueda agregar o si se desea eliminar un select o select multiple. funciona correctamente cuando se utiliza un select normal y silvestre... pero cuando implemento algo más agradable a la vista como un select sencillo o multiple con checkboxes ... el acabo-se... el primer select trabaja perfecto pero el segundo se clona al primero y el tercero y el cuarto... todos los que genere son iguales al primero... es decir ya se cargan seleccionados y no en blanco para proceder a realizar una nueva selección... si alguien puede darle solución a este preciso aspecto les quedo muy agradecidos de antemano... si desean utilizar el scrip para hacerlo trabajar con selects normales adelante!... aquí les doy el script:


antes del </head>

<script type="text/javascript" src="js2/jquery.addfield.js"></script>

despues de <body>

(elemento del form:

<div id="div_1">
Dormitorio <span class="dormitorios"></span>

<select id="Control_1" multiple="multiple" name="dormitorios[]" class="Optgroup">
<option value="">Seleccione las caracteristicas que necesite</option>
<optgroup label="Tipo">
<option value="Individua">Individual</option>
<option value="Doble">Doble</option>
<option value="Triple">Triple</option>
<option value="Cuadruple">Cuadruple</option>
<option value="Jr Suite">Jr Suite</option>
<option value="Suite">Suite</option>
</optgroup>
<optgroup label="Camas">
<option value="Individual">Individual</option>
<option value="Doble">Doble</option>
<option value="Queen Size">Queen Size</option>
<option value="King Size">King Size</option>
<option value="Cama de Agua">Cama de Agua</option>
<option value="Sof&aacute; Cama">Sof&aacute; Cama</option>
</optgroup>
<optgroup label="Cama Supletoria">
<option value="Si">Si</option>
<option value="No">No</option>
</optgroup>
<optgroup label="Ba&ntilde;o">
<option value="Si">Si</option>
<option value="No">No</option>
</optgroup>
<optgroup label="Closet">
<option value="Walk-in Closet">Walk-in Closet</option>
<option value="Closet normal">Closet normal</option>
<option value="No tiene">No tiene</option>
</optgroup>
</select> Cantidad:

<input id="cantdormitorios" name="cantdormitorios[]" type="text" value="" />
<input id="1" class="bt_plus" type="button" value="+" /><br />

</div> -->

y este es el script modificado: (query.addfield.js)

$(document).ready(function() {
//ACA le asigno el evento click a cada boton de la clase bt_plus y llamo a la funcion addField
$(".bt_plus").each(function (e){
$(this).bind("click",addField);
});
});


function addField(){
// ID del elemento div quitandole la palabra "div_" de delante. Pasi asi poder aumentar el número. Esta parte no es necesaria pero yo la utilizaba ya que cada campo de mi formulario tenia un autosuggest , así que dejo como seria por si a alguien le hace falta.

var clickID = parseInt($(this).parent('div').attr('id').replace('div_',''));

// Genero el nuevo numero id
var newID = (clickID+1);

// Creo un clon del elemento div que contiene los campos de texto
$newClone = $('#div_'+clickID).clone(true);

//Le asigno el nuevo numero id
$newClone.attr("id",'div_'+newID);


$newClone.children("#dormitorios option::selected").remove();
$newClone.children("#dormitorios").attr("name",'dormitorios'+newID);


//Borro el valor del segundo campo input(este caso es el campo de cantidad) y lo identifico secuencialmente
$newClone.children("input").eq(0).val('');
$newClone.children("#cantdormitorios").attr("name",'cantdormitorios'+newID);
//Asigno nuevo id al boton
$newClone.children("input").eq(1).attr("id",newID)

//Inserto el div clonado y modificado despues del div original
$newClone.insertAfter($('#div_'+clickID));

//Cambio el signo "+" por el signo "-" y le quito el evento addfield
$("#"+clickID).val('-').unbind("click",addField);

//Ahora le asigno el evento delRow para que borre la fial en caso de hacer click
$("#"+clickID).bind("click",delRow);

}


function delRow() {
// Funcion que destruye el elemento actual una vez echo el click
$(this).parent('div').remove();

}

espero les sirva en algo... y yo.... yo quedo en espera ha ver si alguien me da una manito

Hasta pronto

Guille

12/9/2012
fantastico tu Plugin jQuery para añadir campos
Hola, excelente tu aporte, mi pregunta es si sabrías como insertar este código en wordpress? tenemos la necesidad de hacerlo y si es muy complicado podemos pagar por ese trabajo. espero tu respuesta. un saludo

Roberto Tapia

17/10/2014
Eliminar input creado dinámicamente
Hola, saludos. He implementado la técnica con éxito. Mi pregunta es simple. ¿Cómo puedo hacerlo ahora como para eliminar uno de esos inputs? en el caso de que el usuario se haya equivocado al presionar el botón agregar?

6230i

26/12/2014
Buen artículo
Excelente, me sirvió bastante. Se agradece..

Alex

07/4/2015
No se envían los campos dinámicos creados
Hola amigos:
He estado trabajando en esta variante para crear campos dinámicos y me funciona todo prefecto, hasta la hora de enviar el formulario. Cuando intento recoger los datos enviados no llega ninguno de los campos creados dinámicamente, ni por post y tampoco mediante get.
Que podrá estar sucediendo?
Se agradece cualquier ayuda de antemano.

Pablo

22/9/2015
Requiero de tu ayuda
Cuanto me cobras por hacerme un formulario como el que esta en esta pagina: http://www.acciontelmex.com/cotizar-acciones-telmex/

Lo requiero igual solo que cambie un poco el estilo ... pero debe poder agregar los campos un usuario de igual forma...

RUBEN VAZQUEZ

07/3/2016
Creo que el jqueri que usa es un poco desactualizado
Yo hago formularios para paginas si necesitan.
hello@nextcode.mx

Carlos

27/2/2018
Plugin jQuery para añadir campos en un formulario
Excelente Plugin.
Lo he utilizado y lo he modificado para poder eliminar campos añadidos. Me creo un contador de campos añadidos y un boton del tipo Eliminar el último agregado y borro el último que se ha añadido y le resto 1 al contador.
¡Excelente plugin! que se puede adaptar a tu gusto.