Inicio > html, jquery, php > Agregar Input dinamicamente con Jquery

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 + '"&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í

Anuncios
Categorías:html, jquery, php Etiquetas: , ,
  1. ale
    enero 2, 2011 en 12:09 am

    Hola, muchas gracias por el codigo, queria saber como podria hacer para validar estos campos dinamicos?

    Saludos.

  2. ale
    enero 2, 2011 en 5:48 pm

    Excelente, muchas gracias!!!

  3. Robert
    diciembre 2, 2011 en 4:30 pm

    Muy bueno, realmente sencillo de implementar graciassssssssssssssssssssss

  4. claudio
    enero 5, 2012 en 7:45 pm

    consulta y como tomas estos datos para poder pasarlo a una base de datos

    • enero 6, 2012 en 2:28 am

      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

  5. felipe
    enero 24, 2012 en 2:10 pm

    y para remover campos? desde el ultimo hasta el primero??

  6. febrero 22, 2012 en 8:15 pm

    puedes cambiar el link de descarga por favor

  7. ig
    julio 15, 2012 en 12:43 am

    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.

  8. julio 20, 2012 en 12:05 pm

    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

  9. julio 22, 2012 en 11:48 pm

    Cambiado, saludos!

  10. yelitza urdaneta
    agosto 27, 2012 en 9:13 pm

    ayuda urgente; eso tex dinamicos como guardo sus valores en la bd

    • agosto 27, 2012 en 9:39 pm

      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

  11. septiembre 24, 2012 en 9:37 pm

    ¿Cómo puedo tomar los valores de éstos inputs en un servlet?

  12. Isamar Duarte
    noviembre 9, 2012 en 5:20 am

    Muy practico y sencillo 🙂 muchas gracias por el aporte.

  13. noviembre 9, 2012 en 5:21 am

    Super!

  14. Daniel García
    marzo 25, 2013 en 3:13 am

    Muchas gracias!!!
    Me ha servido mucho!

  15. ChristiaaaaMedina
    agosto 6, 2013 en 4:21 pm

    Como puedo obtener los valores de cada uno por post?

  16. ChristiaaaaMedina
    agosto 6, 2013 en 5:48 pm

    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

    • septiembre 6, 2013 en 3:38 pm

      Los puedes obtener con $(“#form”).serialize(); y pasarlos como data

  17. Luis García
    septiembre 6, 2013 en 3:31 pm

    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

  18. Ivanovick
    noviembre 6, 2013 en 7:27 pm

    GENIAL AMIGO ME SIRVIO MUCHO

  19. xime
    abril 10, 2014 en 5:14 pm

    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

    • abril 10, 2014 en 5:31 pm

      Prueba con esto:

      $(document).ready(function(){
      $(document).on('change', '#select1', function() {
      alert('test');
      });
      });

  20. xime
    abril 10, 2014 en 6:15 pm

    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 + ‘”

    • abril 10, 2014 en 6:40 pm
      • xime
        abril 10, 2014 en 8:32 pm

        pobre el ejemplo y me funciona muy bien,
        voy a llevarlo a mi programa ahora.
        Muchas Gracias te pasaste.:)

      • xime
        abril 10, 2014 en 8:59 pm

        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

      • xime
        abril 10, 2014 en 9:04 pm

        ” +

        ‘<option ‘+
        ‘value=””>’+

        ”;

      • xime
        abril 10, 2014 en 10:00 pm

        muchas gracias, excelente el ejemplo..
        quiero publicar la parte que no me funciona con base de datos..

  21. xime
    abril 10, 2014 en 6:20 pm

    Favor si alguien me puede ayudar se lo agradecería

  22. xime
    abril 10, 2014 en 9:03 pm

    campo = ‘Campo:’+
    ” +

    ‘<option ‘+
    ‘value=””>’+

    ”;

  23. xime
    abril 10, 2014 en 9:57 pm

    xime :
    superrrrrrr el ejemplo y me funciona muy bien,
    voy a llevarlo a mi programa ahora.
    Muchas Gracias te pasaste.:)

    xime :
    pobre el ejemplo y me funciona muy bien,
    voy a llevarlo a mi programa ahora.
    Muchas Gracias te pasaste.:)

    xime :
    pobre el ejemplo y me funciona muy bien,
    voy a llevarlo a mi programa ahora.
    Muchas Gracias te pasaste.:)

  24. xime
    abril 10, 2014 en 9:58 pm

    disculpa quize decir SUPER EL ejemplo

  25. xime
    abril 10, 2014 en 10:05 pm

    esta parte ..en base de datos y no me funciona
    campo = ‘Campo:’+
    ” +

    ‘<option ‘+
    ‘value=””>’+

    ”;
    $(“#campos”).append(campo);
    };

  26. xime
    abril 10, 2014 en 10:19 pm

    esto es ..favor ayudaaaaaaaaaaaa
    ….
    campo = ‘Campo: <option value=””>’;
    $(“#campos”).append(campo);
    };

    • ximena p
      abril 10, 2014 en 10:19 pm

      campo = ‘Campo: <option value=””>’;
      $(“#campos”).append(campo);
      };

  27. ximena p
    abril 10, 2014 en 10:23 pm

    espero que ahora aparezca código

    campo = ‘Campo: <option value=””>’;
    $(“#campos”).append(campo);
    };

    favor ayuda..esto no me funciona

  28. ximena p
    abril 10, 2014 en 10:29 pm

    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

  29. ximena p
    abril 10, 2014 en 10:29 pm

    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=””>’+

  30. ximena p
    abril 10, 2014 en 10:30 pm

    FAVORRRRR si me pueden ayudar ese código no me funciona se le agrego la base de datos

  31. ximena p
    abril 11, 2014 en 12:46 pm

    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.

  32. ximena p
    abril 21, 2014 en 4:45 pm

    muchas gracias me sirvió mucho todo

  33. abril 21, 2014 en 4:49 pm

    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

  34. abril 21, 2014 en 5:17 pm

    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

  35. abril 23, 2014 en 1:54 pm

    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.

    • abril 23, 2014 en 2:07 pm

      Debería ser:
      $(this).find(“option:selected”).text();

  36. abril 23, 2014 en 3:38 pm

    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

    • abril 23, 2014 en 3:41 pm

      Fijate en el el value del select -> option debería decir “CEP STD 13×13”, revisa el select_programa.php

  37. abril 23, 2014 en 3:53 pm

    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.

  38. abril 23, 2014 en 3:59 pm

    esta parte es del value.

    echo ”.$fila[“desc_programa”].”;

    • abril 23, 2014 en 4:50 pm

      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.

  39. abril 23, 2014 en 3:59 pm

    echo ”.$fila[“desc_programa”].”;

  40. abril 23, 2014 en 4:00 pm

    mmm,,,por se no se muestra
    echo “‘.$fila[“id_programa”].'”;

  41. abril 23, 2014 en 4:12 pm

    ‘echo ”.$fila[“desc_programa”].”;’

  42. abril 23, 2014 en 6:31 pm

    muchas gracias…me funciono bien

  43. Sus
    agosto 7, 2014 en 6:22 pm

    Gracias por el código, me sirvió mucho. Saludos!

  44. xime
    septiembre 2, 2014 en 1:29 pm

    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>

    ****************

  45. xime
    septiembre 2, 2014 en 1:30 pm

    Programa /h1>

  46. xime
    septiembre 2, 2014 en 1:33 pm

    -al ingresar al formulario muestra una con los datos base, y esta quede en UN DIV =’midiv”.gracias
    *
    Programa /h1>

    *******

  47. xime
    septiembre 2, 2014 en 1:34 pm

    -al ingresar al formulario muestra tabla una con los datos base, y esta esta tabla (tabla=table)quede en UN DIV =’midiv”.gracias

  48. xime
    septiembre 2, 2014 en 1:35 pm

    (body>
    Programa /h1>

    )

  49. septiembre 2, 2014 en 1:44 pm

    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 );
    });
    });

    • xime
      septiembre 2, 2014 en 2:33 pm

      nmuchas gracias. Me sirvio mucho.

  50. xime
    septiembre 2, 2014 en 2:45 pm

    y como puedo dejar un div oculto al incio. Y luego al presionar un boton aparezca.Gracias

    • septiembre 2, 2014 en 2:53 pm

      De está forma debería funcionar
      $(function() {
      $(“#midiv”).hide();
      $( “#boton” ).click(function() {
      $(“#midiv”).show();
      });
      });

      • xime
        septiembre 2, 2014 en 3:39 pm

        excelente.Gracias

  51. xime
    septiembre 2, 2014 en 11:11 pm

    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.

    • septiembre 3, 2014 en 12:27 am

      si tienes function llenado() debe retornar la la tabla en html, la llamas simplemente con llenado(); , luego con get de jquery cargas eso

      • xime
        septiembre 3, 2014 en 2:17 pm

        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.

  52. Jaime
    septiembre 3, 2014 en 3:08 pm

    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.

  53. septiembre 3, 2014 en 4:06 pm

    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,

    • Jaime
      septiembre 3, 2014 en 4:31 pm

      Disculpa, pero no me aparece nada en ese link

      • Jaime
        septiembre 3, 2014 en 4:31 pm

        da un error de pagina

  54. septiembre 3, 2014 en 6:13 pm

    Acá está el codigo: http://pastebin.com/1tXH1yaF

    • Jaime
      septiembre 3, 2014 en 7:26 pm

      voy a probar.muchas gracias

  55. marzo 12, 2015 en 9:27 pm

    y para borrar campos desde el final al principio?

  1. septiembre 15, 2010 en 2:10 pm
  2. junio 7, 2012 en 3:36 pm

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: