Creación dinámica de un número específico de elementos de formulario de entrada

5 minutos de lectura

avatar de usuario de xan
xana

He leído muchos blogs y publicaciones sobre la adición dinámica de conjuntos de campos, pero todos dan una respuesta muy complicada. Lo que necesito no es tan complicado.

Mi código HTML:

<input type="text" name="member" value="">Number of members: (max. 10)<br />
<a href="#" id="filldetails">Fill Details</a>

Entonces, un usuario ingresará un valor entero (estoy verificando la validación usando javascript) en el input campo. Y al hacer clic en el Fill Details enlace, aparecerá el número correspondiente de campos de entrada para que ingrese. Quiero lograr esto usando javascript.

No soy un profesional en javascript. Estaba pensando cómo puedo recuperar el número entero completado por el usuario en input campo a través del enlace y mostrando el número correspondiente de campos de entrada.

Avatar de usuario de Xavi López
Xavi López

Podrías usar un onclick controlador de eventos para obtener el valor de entrada para el campo de texto. Asegúrese de darle al campo un único id atributo para que pueda consultarlo de forma segura a través de document.getElementById():

Si desea agregar elementos dinámicamente, debe tener un contenedor donde colocarlos. Por ejemplo, un <div id="container">. Crear nuevos elementos por medio de document.createElement()y use appendChild() para añadir cada uno de ellos al contenedor. Es posible que le interese generar una salida significativa name atributo (por ejemplo name="member"+i para cada uno de los generados dinámicamente <input>s si se van a presentar en un formulario.

Tenga en cuenta que también puede crear <br/> elementos con document.createElement('br'). Si solo desea generar algo de texto, puede usar document.createTextNode() en cambio.

Además, si desea borrar el contenedor cada vez que esté a punto de llenarse, puede usar hasChildNodes() y removeChild() juntos.

<html>
<head>
    <script type="text/javascript">
        function addFields(){
            // Generate a dynamic number of inputs
            var number = document.getElementById("member").value;
            // Get the element where the inputs will be added to
            var container = document.getElementById("container");
            // Remove every children it had before
            while (container.hasChildNodes()) {
                container.removeChild(container.lastChild);
            }
            for (i=0;i<number;i++){
                // Append a node with a random text
                container.appendChild(document.createTextNode("Member " + (i+1)));
                // Create an <input> element, set its type and name attributes
                var input = document.createElement("input");
                input.type = "text";
                input.name = "member" + i;
                container.appendChild(input);
                // Append a line break 
                container.appendChild(document.createElement("br"));
            }
        }
    </script>
</head>
<body>
    <input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
    <a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
    <div id="container"/>
</body>
</html>

Vea una muestra de trabajo en este JSFiddle.

  • Seguí tu consejo. Pero cuando hago clic en, la consola del navegador muestra este error: Uncaught TypeError: Cannot call method 'appendChild' of undefined

    – xan

    13 de febrero de 2013 a las 12:55

  • La respuesta muy útil. ¿Y cómo puedo agregar una clase CSS al campo?

    – Pravinraj Venkatachalam

    13 de julio de 2017 a las 7:14

  • @Pravin Me alegro de que haya ayudado, consulte ¿Cómo agrego una clase a un elemento dado? Básicamente usar input.className += ' someCSSClass';

    –Xavi López

    13 de julio de 2017 a las 8:10


  • Cuando envío el formulario, los nuevos campos generados dinámicamente no se envían como los otros campos que formaban parte del HTML original. Aparecen visualmente y puedo inspeccionarlos pero no se envían. ¿Alguna idea de por qué sucedería eso?

    – circulo1

    27 de julio de 2018 a las 15:45


  • @circle1 Asegúrese de que los elementos generados dinámicamente tengan un único name atributo. Solo los elementos de formulario con un atributo de nombre tendrán sus valores pasados ​​al enviar un formulario.

    –Xavi López

    27 de julio de 2018 a las 19:06

Avatar de usuario de M. Lak
M. Lak

Pruebe este código JQuery para incluir dinámicamente formularios, campos y comportamientos de eliminación/eliminación:

$(document).ready(function() {
    var max_fields = 10;
    var wrapper = $(".container1");
    var add_button = $(".add_form_field");

    var x = 1;
    $(add_button).click(function(e) {
        e.preventDefault();
        if (x < max_fields) {
            x++;
            $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="delete">Delete</a></div>'); //add input box
        } else {
            alert('You Reached the limits')
        }
    });

    $(wrapper).on("click", ".delete", function(e) {
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container1">
    <button class="add_form_field">Add New Field &nbsp; 
      <span style="font-size:16px; font-weight:bold;">+ </span>
    </button>
    <div><input type="text" name="mytext[]"></div>
</div>

  • Tal vez estoy haciendo algo mal, pero en mi caso, presionar enter en un campo de texto en este formulario hará que se active la función del botón ‘Agregar nuevo campo’, lo que probablemente sea un comportamiento no deseado …

    -Maxi Mus

    8 sep 2020 a las 21:10

  • <button type="button" ...> y el problema está resuelto.

    -Maxi Mus

    8 sep 2020 a las 21:18


  • ¡Hola! Cuando voy a guardar los datos de las entradas dinámicas, ¿cómo los recupero todos?

    – Héctor Echeverri

    18 de febrero de 2021 a las 15:43

  • Buena respuesta. más+. PERO… vainilla javascript ?? A algunas personas no les gusta agregar bibliotecas.

    –James Walker

    5 jun a las 19:35

  • @METRO. Lak, supongamos que aumentamos el elemento de entrada en 1 en cada click evento y estos fields Los valores se envían con form ¿Cómo podemos recuperar cada input campo values ¿Puedes actualizar la respuesta para que cada input el campo tendrá dinámico (único) id o name atributo

    – Azhar Uddin Jeque

    19 de agosto a las 12:42

¿Ha sido útil esta solución?