Archivo

Posts Tagged ‘html’

Agregar Input dinamicamente con Jquery

septiembre 14, 2010 84 comentarios

En alguna ocasiones se nos presenta la necesidad de añadir elementos dinámicamente en nuestros desarrollos, para este ejemplo vamos a utilizar jquery para aquellos que no conocen este framework pueden visitar http://www.jquery.com existe una gran cantidad de ejemplos y documentación.

Lo primero es incluir jquery en nuestro HTML  y crear el formulario para ir agregando nuestros input.


 <form id="form" name="form" method="post">
 <a href="#" onclick="AgregarCampos();">Agregar Campos</a>
 <div id="campos">

Teniendo incluido jquery crearemos una función AgregarCampos, la cual se encargara de ir agregando los inputs dinamicamente, la funcion quedaria mas o menos así.

<script type="text/javascript">
var nextinput = 0;
function AgregarCampos(){
nextinput++;
campo = '<li id="rut'+nextinput+'">Campo:<input type="text" size="20" id="campo' + nextinput + '"&nbsp; name="campo' + nextinput + '"&nbsp; /></li>';
$("#campos").append(campo);
}
</script>

Lo que hace esta función es que cada vez que se hace click en el link agregar campos va sumando un input, dejare un ejemplo para que lo puedan descargar y probar el link es el siguiente.
http://sdrv.ms/OifqYZ

En el próximo post mostraremos como validar y  mandar el contenido a un php para que este procese los datos.

Recuerden Revisar la versión  II Aquí

Categorías:html, jquery, php Etiquetas: , ,