Bagaimana untuk Mencipta Elemen Borang Input Secara Dinamik Berdasarkan Nombor Yang Ditentukan Pengguna?

Mencipta Elemen Borang Input Dinamik untuk Nombor Yang Ditentukan Pengguna

Memahami tugas yang sedang dijalankan, pengguna berhasrat untuk menjana elemen borang input secara dinamik berdasarkan pada integer yang disediakan pengguna. Matlamatnya adalah untuk menyediakan penyelesaian yang mudah tanpa merumitkan proses.

Menggunakan JavaScript, kita boleh mendekati cabaran ini dengan menggunakan langkah berikut:

1. Dapatkan Pengguna Input:

   • Gunakan pengendali acara onclick untuk pautan "Isi Butiran" untuk mendapatkan nilai integer daripada medan input.
   • Tetapkan atribut id unik pada input medan, seperti "ahli", untuk mengakses nilainya dengan mudah.

2. Buat Bekas untuk Elemen Input:

   • Tentukan elemen bekas, seperti
     , di mana elemen yang dijana secara dinamik akan diletakkan.

3. Jana Elemen Input:

   • Lelaran melalui gelung berdasarkan nilai integer yang disediakan pengguna.
   • Gunakan document.createElement() untuk mencipta elemen dan tetapkan jenis dan nama atributnya.
   • Tambahkan elemen yang dicipta pada bekas yang ditentukan menggunakan appendChild().

4. Kosongkan Elemen Sebelumnya ( Pilihan):

   • Jika perlu, gunakan hasChildNodes() dan removeChild() untuk mengalih keluar sebarang elemen sedia ada dalam bekas sebelum menjana elemen baharu.

Coretan kod:

<code class="javascript">function addFields(){
    // Get user input for number of elements
    var number = document.getElementById("member").value;

    // Get the element where inputs will be placed
    var container = document.getElementById("container");

    // Remove any existing elements
    while (container.hasChildNodes()) {
        container.removeChild(container.lastChild);
    }

    // Create and append input elements
    for (i=0; i<number; i++){
        container.appendChild(document.createTextNode("Member " + (i+1)));
        var input = document.createElement("input");
        input.type = "text";
        input.name = "member" + i;
        container.appendChild(input);
        container.appendChild(document.createElement("br"));
    }
}</code>

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Elemen Borang Input Secara Dinamik Berdasarkan Nombor Yang Ditentukan Pengguna?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!