Menambahkan elemen masukan secara dinamis ke formulir

Question 1

Saya telah membaca banyak blog dan posting tentang menambahkan fieldets secara dinamis, tetapi semuanya memberikan jawaban yang sangat rumit. Yang saya butuhkan tidak serumit itu.

Kode HTML saya:

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

Jadi, pengguna akan memasukkan nilai integer (saya memeriksa validasi menggunakan javascript) di inputlapangan. Dan saat mengklik Fill Detailslink tersebut, jumlah kolom input yang sesuai akan muncul untuk dimasuki. Saya ingin mencapai ini menggunakan javascript.

Saya bukan ahli dalam javascript. Saya berpikir bagaimana saya bisa mengambil bilangan bulat yang diisi oleh pengguna di inputlapangan melalui tautan dan menampilkan jumlah bidang masukan yang sesuai.

Question 2

Anda bisa menggunakan onclickpengendali kejadian untuk mendapatkan nilai input untuk bidang teks. Pastikan Anda memberi kolom idatribut unik sehingga Anda dapat merujuknya dengan aman melalui document.getElementById():

Jika Anda ingin menambahkan elemen secara dinamis, Anda harus memiliki wadah untuk menempatkannya. Misalnya, a <div id="container">. Buat elemen baru dengan cara document.createElement(), dan gunakan appendChild()untuk menambahkan masing-masing elemen ke wadah. Anda mungkin tertarik untuk mengeluarkan nameatribut yang berarti (misalnya name="member"+iuntuk setiap atribut yang dihasilkan secara dinamis <input>jika mereka akan dikirimkan dalam formulir.

Perhatikan bahwa Anda juga bisa membuat <br/>elemen dengan document.createElement('br'). Jika Anda hanya ingin menampilkan beberapa teks, Anda dapat menggunakan document.createTextNode().

Selain itu, jika Anda ingin membersihkan wadah setiap kali akan diisi, Anda dapat menggunakan hasChildNodes()dan removeChild()bersama - sama.

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

Luaskan cuplikan

Lihat contoh yang berfungsi di JSFiddle ini .

Question 3

Coba kode JQuery ini untuk secara dinamis menyertakan bentuk, bidang, dan perilaku hapus / hapus:

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

Luaskan cuplikan

Lihat Demo Di Sini