Aggiunta dinamica di elementi di input al modulo

Question 1

Ho letto molti blog e post sull'aggiunta dinamica di set di campi, ma tutti danno una risposta molto complicata. Quello di cui ho bisogno non è così complicato.

Il mio codice HTML:

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

Quindi, un utente inserirà un valore intero (sto controllando la convalida utilizzando javascript) nel inputcampo. E facendo clic sul Fill Detailscollegamento, apparirà il numero corrispondente di campi di input da inserire. Voglio ottenere questo risultato utilizzando javascript.

Non sono un professionista in javascript. Stavo pensando come posso recuperare il numero intero compilato dall'utente nel inputcampo tramite il link e visualizzando il numero corrispondente di campi di input.

Question 2

È possibile utilizzare un onclickgestore di eventi per ottenere il valore di input per il campo di testo. Assicurati di assegnare al campo un idattributo univoco in modo da poterlo fare riferimento in sicurezza tramite document.getElementById():

Se vuoi aggiungere dinamicamente elementi, dovresti avere un contenitore in cui posizionarli. Ad esempio, a <div id="container">. Creare nuovi elementi mediante document.createElement()e utilizzare appendChild()per aggiungere ciascuno di essi al contenitore. Potresti essere interessato all'output di un nameattributo significativo (ad esempio name="member"+iper ciascuno degli <input>s generati dinamicamente se devono essere presentati in un modulo.

Nota che potresti anche creare <br/>elementi con document.createElement('br'). Se vuoi solo produrre del testo, puoi usare document.createTextNode()invece.

Inoltre, se vuoi svuotare il contenitore ogni volta che sta per essere popolato, puoi usare hasChildNodes()e removeChild()insieme.

<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>

Espandi lo snippet

Guarda un esempio funzionante in questo JSFiddle .

Question 3

Prova questo codice JQuery per includere dinamicamente il modulo, il campo e il comportamento di eliminazione / rimozione:

$(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>

Espandi lo snippet

Fare riferimento alla demo qui