Dynamiczne dodawanie elementów wejściowych do formularza

Question 1

Przeczytałem wiele blogów i postów na temat dynamicznego dodawania zestawów pól, ale wszystkie dają bardzo skomplikowaną odpowiedź. To, czego wymagam, nie jest takie skomplikowane.

Mój kod HTML:

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

Tak więc użytkownik wprowadzi wartość całkowitą (sprawdzam walidację za pomocą javascript) w inputpolu. Po kliknięciu Fill Detailslinku pojawi się odpowiednia liczba pól wejściowych, które może wprowadzić. Chcę to osiągnąć za pomocą javascript.

Nie jestem profesjonalistą w javascript. Zastanawiałem się, jak pobrać liczbę całkowitą wypełnioną przez użytkownika w inputpolu za pośrednictwem linku i wyświetlając odpowiednią liczbę pól wejściowych.

Question 2

Możesz użyć onclickmodułu obsługi zdarzeń, aby uzyskać wartość wejściową dla pola tekstowego. Upewnij się, że nadałeś polu unikalny idatrybut, abyś mógł bezpiecznie się do niego odwoływać poprzez document.getElementById():

Jeśli chcesz dynamicznie dodawać elementy, powinieneś mieć pojemnik, w którym je umieścić. Na przykład a <div id="container">. Twórz nowe elementy za pomocą document.createElement()i appendChild()dołączaj każdy z nich do kontenera. Możesz być zainteresowany wyprowadzeniem znaczącego nameatrybutu (np. name="member"+iDla każdego z dynamicznie generowanych <input>plików, jeśli mają być przesłane w formularzu).

Zauważ, że możesz również tworzyć <br/>elementy za pomocą document.createElement('br'). Jeśli chcesz po prostu wypisać jakiś tekst, możesz użyć document.createTextNode()zamiast tego.

Ponadto, jeśli chcesz wyczyścić kontener za każdym razem, gdy ma się zapełnić, możesz użyć hasChildNodes()i removeChild()razem.

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

Zobacz próbkę roboczą w tym JSFiddle .

Question 3

Wypróbuj ten kod JQuery, aby dynamicznie dołączać formularz, pole i zachowanie usuwania / usuwania:

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

Rozwiń fragment

Zapoznaj się z demo tutaj