Agregar elementos de entrada dinámicamente al formulario

89

He leído muchos blogs y publicaciones sobre cómo agregar conjuntos de campos de forma dinámica, 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 inputcampo. Y al hacer clic en el Fill Detailsenlace, 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 el inputcampo a través del enlace y mostrar el número correspondiente de campos de entrada.

javascript html forms xan
fuente

Respuestas:

149

Puede usar un onclickcontrolador de eventos para obtener el valor de entrada para el campo de texto. Asegúrese de darle al campo un idatributo único 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, a <div id="container">. Cree nuevos elementos mediante document.createElement(), y utilice appendChild()para agregar cada uno de ellos al contenedor. Es posible que le interese generar un nameatributo significativo (por ejemplo, name="member"+ipara cada uno de los mensajes de correo electrónico generados dinámicamente <input>si se van a enviar 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 su lugar.

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

<html>
<head>
    <script type='text/javascript'>
        function addFields(){
            // Number of inputs to create
            var number = document.getElementById("member").value;
            // Container <div> where dynamic content will be placed
            var container = document.getElementById("container");
            // Clear previous contents of the container
            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 funcional en este JSFiddle .

Xavi López
fuente
Seguí tu consejo. Pero cuando hago clic en, la consola del navegador muestra este error:Uncaught TypeError: Cannot call method 'appendChild' of undefined
xan
La respuesta es muy útil. ¿Y cómo puedo agregar una clase CSS al campo?
Pravinraj Venkatachalam
3
@Pravin Me alegro de que haya ayudado, consulte ¿Cómo agrego una clase a un elemento determinado? . Básicamente usoinput.className += ' someCSSClass';
Xavi López
1
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?
circle1
@ circle1 Asegúrese de que los elementos generados dinámicamente tengan un nameatributo único . Solo los elementos de formulario con un atributo de nombre tendrán sus valores transferidos al enviar un formulario.
Xavi López
29

Pruebe este código de JQuery para incluir dinámicamente el formulario, el campo y el comportamiento 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>
Expandir fragmento

Consulte la demostración aquí

M. Lak
fuente
Tal vez estoy haciendo algo mal, pero en mi caso, si presiona Intro en un campo de texto en este formulario, se activará la función del botón 'Agregar nuevo campo', que probablemente sea un comportamiento no deseado ...
Maxi Mus
1
<button type="button" ...>y el problema está resuelto.
Maxi Mus