Agregar elementos de entrada dinámicamente al formulario

Question 1

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.

Question 2

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 .

Question 3

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í