Bagaimanakah Saya Boleh Menjana Elemen Borang Input Secara Dinamik Berdasarkan Input Pengguna?-tutorial js-php.cn

Bagaimanakah Saya Boleh Menjana Elemen Borang Input Secara Dinamik Berdasarkan Input Pengguna?

Barbara Streisand

Lepaskan： 2024-10-27 10:16:30

asal

220 orang telah melayarinya

How Can I Dynamically Generate Input Form Elements Based on User Input?

Elemen Borang Input Menjana Secara Dinamik Berdasarkan Input Pengguna

Apabila dibentangkan dengan tugas menambah bilangan elemen borang input tertentu, adalah wajar untuk mencari penyelesaian yang mudah dan cekap .

Dalam senario ini, kami mempunyai struktur HTML yang terdiri daripada medan input di mana pengguna memasukkan nilai yang mewakili bilangan medan input yang dikehendaki. Apabila mengklik pautan, bilangan medan input yang sepadan hendaklah dijana secara dinamik.

Mendapatkan Masukan Pengguna

Untuk mendapatkan semula nilai integer yang dimasukkan oleh pengguna, kita boleh menggunakan pengendali acara onclick dilampirkan pada pautan. Dengan memberikan ID unik pada medan input, kami boleh mengakses nilainya menggunakan document.getElementById():

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

Salin selepas log masuk

Mencipta dan Menambah Elemen Input

Untuk cekap tambah elemen input, kami mengesyorkan anda membuat elemen kontena (cth.,

) di mana anda akan menambahkan medan input yang baru dibuat. Menggunakan document.createElement(), kita boleh mencipta elemen input, menentukan atributnya dan menambahkannya pada bekas:

<code class="javascript">var container = document.getElementById("container");

for (i = 0; i < number; i++) {
  // Append a text node
  container.appendChild(document.createTextNode("Member " + (i + 1)));

  // Create an input element
  var input = document.createElement("input");
  input.type = "text";
  input.name = "member" + i;
  container.appendChild(input);

  // Append a line break
  container.appendChild(document.createElement("br"));
}</code>

Salin selepas log masuk

Pendekatan ini membolehkan anda mengisi kontena secara dinamik berdasarkan input pengguna. Pertimbangkan untuk menggunakan hasChildNodes() dan removeChild() untuk mengosongkan bekas sebelum menambah elemen baharu untuk memastikan hanya medan yang berkaitan dipaparkan.

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