Bagaimanakah Saya Boleh Mencipta Elemen Borang Input Dinamik Berdasarkan Input Pengguna?

Elemen Borang Input Menjana Secara Dinamik Berdasarkan Input Pengguna

Pernyataan Masalah

Mencipta elemen borang input dinamik berdasarkan nombor tertentu yang disediakan oleh pengguna boleh menjadi tugas yang sukar. Beberapa sumber dalam talian menawarkan penyelesaian yang kompleks, yang boleh membebankan pengguna yang mencari pendekatan yang lebih mudah.

Penyelesaian

Dalam pendekatan yang dipermudahkan ini, kami akan mencipta medan input secara dinamik berdasarkan nilai berangka yang dimasukkan oleh pengguna.

1. Dapatkan Input Pengguna

Menggunakan Javascript, kami boleh mendapatkan semula nilai integer yang dimasukkan oleh pengguna dalam medan input "Bilangan ahli".

<code class="javascript">var number = document.getElementById("member").value;</code>

2. Cipta Elemen Bekas

Kami memerlukan elemen bekas untuk memegang medan input yang dijana secara dinamik. Buat bekas div dengan id "bekas" untuk tujuan ini.

<code class="html"><div id="container"></div></code>

3. Menjana Input Secara Dinamik

Gelung melalui nombor yang dimasukkan pengguna, mencipta dan menambahkan medan input pada elemen kontena. Ingat untuk memberikan nama unik pada medan ini untuk penyerahan borang yang betul.

<code class="javascript">for (i=0;i<number;i++){
  var input = document.createElement("input");
  input.type = "text";
  input.name = "member" + i;
  container.appendChild(input);
  container.appendChild(document.createElement("br"));
}

4. Pengendali Acara untuk Serah

Tugaskan pengendali acara pada pautan "Isi Butiran" yang mencetuskan fungsi di atas, dengan itu menjana bilangan medan input yang diperlukan.

<code class="html"><a href="#" id="filldetails" onclick="addFields()">Fill Details</a></code>

5. Kosongkan Bekas Sebelum Pengisian Semula

Untuk mengelakkan pertindihan input apabila beberapa penyerahan borang dibuat, adalah amalan terbaik untuk mengosongkan elemen kontena sebelum mengisi semula dengan medan input baharu.

<code class="javascript"> while (container.hasChildNodes()) {
    container.removeChild(container.lastChild);
}</code>

Dengan mengikut langkah-langkah ini, anda boleh mencipta bilangan elemen borang input secara dinamik, menjadikan penyelesaian itu cekap dan mesra pengguna.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Elemen Borang Input Dinamik Berdasarkan Input Pengguna?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!