Giriş öğelerini forma dinamik olarak ekleme

Question 1

Dinamik olarak alan kümesi ekleme üzerine birçok blog ve gönderi okudum, ancak hepsi çok karmaşık bir cevap veriyor. İhtiyaç duyduğum şey o kadar karmaşık değil.

HTML Kodum:

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

Yani, bir kullanıcı inputalana bir tamsayı değeri girecektir (javascript kullanarak doğrulamayı kontrol ediyorum) . Ve Fill Detailsbağlantıya tıklandığında, girmesi için karşılık gelen sayıda giriş alanı görünecektir. Bunu javascript kullanarak başarmak istiyorum.

JavaScript konusunda profesyonel değilim. inputAlana kullanıcı tarafından doldurulan tamsayıyı bağlantı üzerinden nasıl alabilirim ve karşılık gelen sayıda giriş alanını görüntüleyebilirim diye düşünüyordum.

Question 2

onclickMetin alanı için giriş değerini almak için bir olay işleyicisi kullanabilirsiniz . idAşağıdakiler aracılığıyla güvenle başvurabilmek için alana benzersiz bir özellik verdiğinizden emin olun document.getElementById():

Dinamik olarak eleman eklemek istiyorsanız, onları yerleştireceğiniz bir konteynere sahip olmalısınız. Örneğin, a <div id="container">. Aracılığıyla yeni öğeler oluşturun document.createElement()ve appendChild()her birini kaba eklemek için kullanın. Anlamlı bir nameöznitelik çıkarmak ilginizi çekebilir (örneğin name="member"+i, dinamik olarak üretilen her bir URL <input>bir formda gönderileceklerse için.

İle <br/>öğeler de oluşturabileceğinizi unutmayın document.createElement('br'). Sadece bir metin çıktısı almak istiyorsanız, document.createTextNode()bunun yerine kullanabilirsiniz .

Ayrıca, kapsayıcıyı doldurmak üzere olan her seferinde temizlemek isterseniz, hasChildNodes()ve removeChild()birlikte kullanabilirsiniz .

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

Snippet'i genişlet

Bu JSFiddle'da çalışan bir örneğe bakın .

Question 3

Form, alan ve silme / kaldırma davranışını dinamik olarak dahil etmek için bu JQuery kodunu deneyin:

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

Snippet'i genişlet

Bakınız İşte Demo