Agregar Input dinamicamente con Jquery
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 + '" name="campo' + nextinput + '" /></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í
Mbarrerar's Blog 
Hola, muchas gracias por el codigo, queria saber como podria hacer para validar estos campos dinamicos?
Saludos.
Agregado en el blog, un saludo
Excelente, muchas gracias!!!
Muy bueno, realmente sencillo de implementar graciassssssssssssssssssssss
consulta y como tomas estos datos para poder pasarlo a una base de datos
Lo puedes enviar mediante ajax ver la funcion post de jquery o simplemente si te retorna true la validación puedes agregar un action al formulario y enviar por post o get
y para remover campos? desde el ultimo hasta el primero??
puedes cambiar el link de descarga por favor
After looking at a handful of the blog posts on your website, I truly like
your way of writing a blog. I saved it to my bookmark website list and will be checking back soon.
Please check out my web site too and tell me what you think.
excelente aporte, me ayudo a aclarar mis dudas lastima que no se puede apreciar el link por la ley sopa contra megaupload. Por favor cambia
el link
Cambiado, saludos!
ayuda urgente; eso tex dinamicos como guardo sus valores en la bd
Es bastante sencillo, solo debes darle un action al formulario y en save.php recibir las variables por POST, si tienes dudas me escribes.
saludos
¿Cómo puedo tomar los valores de éstos inputs en un servlet?
Muy practico y sencillo 🙂 muchas gracias por el aporte.
Super!
Muchas gracias!!!
Me ha servido mucho!
Como puedo obtener los valores de cada uno por post?
Lo tengo de la siguiente manera:
Jquery Examples
var nextinput = 0;
function AgregarCampos() {
nextinput++;
campo = »;
$(«#campos»).append(campo);
enviarDatos(nextinput);
}
function enviarDatos(nextinput) {
var parametros = {«nextinput»: nextinput};
$.ajax({
data: parametros,
url: ‘funciones/receptor_input.php’,
type: ‘post’,
success: function(response) {
$(«#muestra»).html(response);
}
});
}
Agregar Campos
Los puedes obtener con $(«#form»).serialize(); y pasarlos como data
Mi versión, ojalá les sirva, saludos
Jquery Examples
var nextinput = 0;
function AgregarCampos(){
nextinput++;
campo = ‘Campo’+nextinput+’:’;
$(«#campos»).append(campo);
}
function EliminarCampos(){
$(‘.fila’+nextinput).remove();
nextinput–;
if (nextinput==1) {
$(this).remove();
};
}
Nombre
Agregar Campos
Eliminar Campos
Gracias por compartir
GENIAL AMIGO ME SIRVIO MUCHO
Por favor AYUDDDDAAA….en la función function AgregarCampos(){
agrego un select que trae los datos de la base de datos.
este es el código:
‘<select id="select1' + nextinput + '" name="select1' + nextinput + '"
'Seleccione ‘+
‘<option ‘+
‘value=»»>’+
» +
……
y necesito hacer una llamada la siguiente cuando cambia , coloque un ejemplo
de una alerta para ir si llama a esta función, pero no hace nada
Favor me pueden ayudar no se como pasarle el índice a esta parte $(«#select1′ «)
$(document).ready(function(){
$(«#select1’ «).change(function(event){
alert (‘pasooooo’) ;
});
});
Favor me pueden ayudar, en esta parte llenare otro select que es dinamico.
Muchas gracias
Prueba con esto:
$(document).ready(function(){$(document).on('change', '#select1', function() {
alert('test');
});
});
probe , no funciona,
pero el name va cambiando, es dinámico, se va agregando el select a presionar un botón, ese es mi problema no se como hacer que vaya cambiando el nombre
name=»select1′ + nextinput + ‘»
Es algo así ?
http://jsfiddle.net/QubQP/
pobre el ejemplo y me funciona muy bien,
voy a llevarlo a mi programa ahora.
Muchas Gracias te pasaste.:)
si eso mismo lo llevo a un select en una tabla y con llenado base datos..
campo = ‘Campo:’+
» +
‘<option ‘+
‘value=»»>’+
»;
$(«#campos»).append(campo);
};
no me funciona …en que estre mal..muchas gracias
» +
‘<option ‘+
‘value=»»>’+
»;
muchas gracias, excelente el ejemplo..
quiero publicar la parte que no me funciona con base de datos..
Favor si alguien me puede ayudar se lo agradecería
campo = ‘Campo:’+
» +
‘<option ‘+
‘value=»»>’+
»;
disculpa quize decir SUPER EL ejemplo
esta parte ..en base de datos y no me funciona
campo = ‘Campo:’+
» +
‘<option ‘+
‘value=»»>’+
»;
$(«#campos»).append(campo);
};
esto es ..favor ayudaaaaaaaaaaaa
….
campo = ‘Campo: <option value=»»>’;
$(«#campos»).append(campo);
};
campo = ‘Campo: <option value=»»>’;
$(«#campos»).append(campo);
};
espero que ahora aparezca código
campo = ‘Campo: <option value=»»>’;
$(«#campos»).append(campo);
};
favor ayuda..esto no me funciona
no se ..si se podrá mezclar ese código con php..necesito llenar el select extrayendo los datos de la base de datos..mezclado..
esto :
campo2 = ‘Campo:’+
» +
y luego vendría
‘<option ‘+
‘value=»»>’+
terminando con esto.
»;
se podrá ???…muchas gracias
le agrego en el select
$rsclase=pg_query(«Select id_claseorden, desc_claseorden,id_claseorden FROM tbl_claseorden ;»);
while($row_clase=pg_fetch_row($rsclase)){
?>
‘<option ‘+
‘value=»»>’+
FAVORRRRR si me pueden ayudar ese código no me funciona se le agrego la base de datos
trata de pegar el código en http://pastebin.com/ para p oder ayudarte.
saludos
Pegue el link en la ruta que me dejo. Espero se vea muchas gracias.
Este es el código: la idea es seleccionar un dato del select campo1 (que es llenado con datos base de datos),
y al seleccionar un valor con la function on change debe cargar los datos en el campo2, pero los datos que llena deben corresponder los datos asociados al select campo1.
muchas gracias me sirvió mucho todo
Buenas tardes,
alguien tendrá un función para restar dos horas y me entregue dos horas y me entregue la cantidad de minutos.
ej: hora 1: 23:00 – hora 01:30.-.resultado 90 minutos.,
Muchas gracias, muy bueno el block
abril 21, 2014 en 4:49 pm | #44
Responder | Cita
Buenas tardes,
favor me podrian ayudar alguien tendrá un función para restar dos horas y me entregue la cantidad de minutos.
ej: hora num1: 23:00 – hora num2: 01:30.-.resultado 90 minutos.,
Muchas gracias, muy bueno el block
te recomiendo moment.js
http://momentjs.com/docs/#/displaying/difference/
http://jsfiddle.net/mB5Vy/1/
super.,…muchas gracias
Otra consulta: tengo lo siguiente
$(document).on(‘change’, ‘.selector3′, function() {
var programa = $(this).val();
este combobox esta con los siguientes datos:
CEP STD 13X13
CEP MSD 13X13
el valor que me devuelve en la variable programa es : CEP
siendo que debería ser : CEP STD 13×13,CEP MSD 13X13
me corta hasta el espacio ..¿.como soluciono esto ??
muchas gracias.
Debería ser:
$(this).find(«option:selected»).text();
Gracias eso funciona super..pero creo que hice mal la pregunta
combobox lo lleno de esta forma..
$(document).ready(function(){
$(document).on(‘change’, ‘.selector2’, function() {
$(‘#programa’).load(‘select_programa.php);
});
});
pero mi duda…el combobox programa lo llena y muestra bien con los valores CEP STD 13×13, pero tengo un botón grabar y al presionar el botón el valor del combobox lo obtiene mal con $_POST[«programa»]…en php.
Hay solo me graba CEP.
Se entiende .gracias
Fijate en el el value del select -> option debería decir «CEP STD 13×13», revisa el select_programa.php
este el el select_programa.php, y me muestra bien el campo
$query = «SELECT id_programa,desc_programa FROM tbl_programa»;
$result = pg_query($query);
while ($fila = pg_fetch_array($result)) {
echo ».$fila[«desc_programa»].»;
};
el resultado me lo muestra bien en el combobox CEP STD 13×13, pero al grabarlo lo se corta.
esta parte es del value.
echo ».$fila[«desc_programa»].»;
ve que está llegando al php que graba usa var_dump($_POST); exit(0); si llega bien y la base de datos lo corta es posible que el campo en la db no tenga el largo correcto.
echo ».$fila[«desc_programa»].»;
mmm,,,por se no se muestra
echo «‘.$fila[«id_programa»].'»;
‘echo ».$fila[«desc_programa»].»;’
muchas gracias…me funciono bien
Gracias por el código, me sirvió mucho. Saludos!
Buenos dias, consulta si me pueden ayudar.
Existira alguna forma de que al ingresar al un formulario me muestre una tabla con un listado de los datos de mi base de datos. Pero que esta tabla que en el div=’midiv’.
Favor si tiene algun ejemplo.
********
Programa /h1>
****************
Programa /h1>
-al ingresar al formulario muestra una con los datos base, y esta quede en UN DIV =’midiv».gracias
*
Programa /h1>
*******
-al ingresar al formulario muestra tabla una con los datos base, y esta esta tabla (tabla=table)quede en UN DIV =’midiv”.gracias
(body>
Programa /h1>
)
Hola eso es bastante fácil, utilizando la función get de jquery, para esto solo necesitas crear un archivo tabla.php que te genere la tabla con sus datos y luego llamarla con:
$(function() {
$.get( «tabla.php», function( data ) {
$( «#midiv» ).html( data );
});
});
nmuchas gracias. Me sirvio mucho.
y como puedo dejar un div oculto al incio. Y luego al presionar un boton aparezca.Gracias
De está forma debería funcionar
$(function() {
$(«#midiv»).hide();
$( «#boton» ).click(function() {
$(«#midiv»).show();
});
});
excelente.Gracias
Otra consulta..y tengo una funcion pero EN PHP …como la puedo llamar
para que cargue el (div)..???..esta funcion de php se llama llenado()
Gracias.
si tienes function llenado() debe retornar la la tabla en html, la llamas simplemente con llenado(); , luego con get de jquery cargas eso
si..la funcion llenado() me devuelve la tabla con los datos en html, mi duda es como es a estrutura para enviar la funciona al get de jquery.Gracias.
Buenos dias, con respecto a estos ejemplos mostrados.
Utilzo ese mismo ejemplo.
$(function() {
$.get( “tabla.php”, function( data ) {
$( “#midiv” ).html( data );
});
});
Mi pregunta es como puedo recorrer esa tabla ya que necesito guarda los datos que contiene.
En PHP con $_REQUEST no me muestra nada es como si no estuvieran los datos.
A su vez a la misma tabla le agregue filas con el ejemplo que encontre aca,
Agregar Campos
Necesito recuperar todo el contendio de la tabla para grabar en la base datos.
Les agradezco me puedan ayudar.Gracias.
Prueba esto, http://jsfiddle.net/fzxu7ov6/# , debes tener un archivo guardar.php , este recibirá por $_POST los datos , en este caso el contenido de los inputs,
Disculpa, pero no me aparece nada en ese link
da un error de pagina
Acá está el codigo: http://pastebin.com/1tXH1yaF
voy a probar.muchas gracias
y para borrar campos desde el final al principio?