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

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

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

Answer 3

Saya mengikuti saran Anda. Tetapi ketika saya mengklik, konsol browser menampilkan kesalahan ini:Uncaught TypeError: Cannot call method 'appendChild' of undefined

xan

Answer 4

Jawabannya sangat membantu. Dan bagaimana saya bisa menambahkan kelas CSS ke lapangan

Pravinraj Venkatachalam

Answer 5

3

@Pravin Senang membantu, lihat Bagaimana cara menambahkan kelas ke elemen tertentu? . Pada dasarnya digunakaninput.className += ' someCSSClass';

Xavi López

Answer 6

1

Saat saya mengirimkan formulir, kolom baru yang dibuat secara dinamis tidak dikirimkan seperti kolom lain yang merupakan bagian dari HTML asli. Mereka muncul secara visual dan saya dapat memeriksanya tetapi mereka tidak tunduk. Ada ide mengapa itu terjadi?

lingkar1

Answer 7

@ circle1 Pastikan elemen yang dibuat secara dinamis memiliki nameatribut unik . Hanya elemen formulir dengan atribut nama yang nilainya akan diteruskan saat mengirimkan formulir.

Xavi López

Answer 8

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

Answer 9

Mungkin saya melakukan sesuatu yang salah, tetapi dalam kasus saya, setiap menekan enter di bidang teks dalam formulir ini akan menyebabkan fungsi tombol 'Tambahkan Bidang Baru' diaktifkan, yang mungkin merupakan perilaku yang tidak diinginkan ...

Maxi Mus

Answer 10

1

<button type="button" ...>dan masalahnya terpecahkan.

Maxi Mus

Menambahkan elemen masukan secara dinamis ke formulir

Jawaban: