jQuery Academy · Pelajaran

Manipulasi Bidang Formulir Dinamis

Pelajari cara menambahkan, menghapus, dan mengubah bidang formulir secara dinamis berdasarkan masukan pengguna untuk membuat antarmuka formulir yang adaptif dan interaktif menggunakan jQuery.

Manipulasi Bidang Formulir Dinamis adalah pelajaran jQuery Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar jQuery Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus jQuery Academy mencakup 3 pelajaran total.

Formulir Dinamis: Alasan & Cara

Formulir sering kali bersifat statis, tetapi aplikasi web modern mengandalkan interaktivitas. Manipulasi bidang formulir secara dinamis memungkinkan Anda mengubah struktur formulir secara waktu nyata.

Artinya, Anda dapat menambahkan, menghapus, atau mengubah bidang input saat pengguna berinteraksi dengan halaman Anda. Hal ini menghasilkan pengalaman pengguna yang jauh lebih baik dan formulir yang lebih mudah disesuaikan!

Menambahkan Bidang: Dasar-Dasar

Gagasan utama di balik penambahan bidang adalah membuat elemen HTML baru dan menyisipkannya ke dalam Document Object Model (DOM).

Gunakan jQuery untuk membuat elemen (misalnya, $('')).
Gunakan metode seperti .append(), .prepend(), .after(), atau .before() untuk menempatkannya secara tepat di dalam formulir.
Ingatlah untuk memberikan atribut name yang sesuai pada bidang baru, terutama untuk pemrosesan sisi belakang.

Menambahkan Input Email Baru

Mari kita tambahkan tombol yang, saat diklik, menghasilkan bidang input email baru. Perhatikan cara kita membuat string HTML lalu menambahkannya.

<div id="email-fields">
  <input type="email" name="email[]" placeholder="Email 1">
</div>
<button id="add-email">Add Another Email</button>

<script>
$(document).ready(function() {
  let emailCount = 1;
  $('#add-email').on('click', function() {
    emailCount++;
    const newEmailField = `
      <input type="email" name="email[]" 
             placeholder="Email ${emailCount}">
    `;
    $('#email-fields').append(newEmailField);
  });
});
</script>

Menghapus Bidang: Pembersihan

Sama seperti pengguna mungkin perlu menambahkan bidang, mereka juga sering perlu menghapusnya. Hal ini menjaga formulir tetap rapi dan relevan dengan kebutuhan mereka.

Metode .remove() milik jQuery sangat cocok untuk ini. Metode tersebut mengeluarkan elemen yang dipilih dari DOM sepenuhnya, bersama data dan penangan peristiwa apa pun yang terkait.

Menghapus Input Tertentu

Sekarang, mari kita kembangkan contoh sebelumnya. Kita akan menambahkan tombol 'Hapus' di samping setiap bidang email. Mengekliknya akan menghapus bidang tertentu tersebut.

Penting: Perhatikan cara kita menangani peristiwa untuk tombol 'Hapus' yang ditambahkan secara dinamis!

<div id="email-fields">
  <div class="email-group">
    <input type="email" name="email[]" placeholder="Email 1">
    <button class="remove-email">Remove</button>
  </div>
</div>
<button id="add-email">Add Another Email</button>

<script>
$(document).ready(function() {
  let emailCount = 1;

  $('#add-email').on('click', function() {
    emailCount++;
    const newEmailGroup = `
      <div class="email-group">
        <input type="email" name="email[]" 
               placeholder="Email ${emailCount}">
        <button class="remove-email">Remove</button>
      </div>
    `;
    $('#email-fields').append(newEmailGroup);
  });

  // Event delegation for remove buttons
  $('#email-fields').on('click', '.remove-email', function() {
    $(this).parent('.email-group').remove();
  });
});
</script>

Mengubah Bidang: Menyesuaikan Atribut

Terkadang Anda tidak perlu menambahkan atau menghapus bidang, melainkan hanya mengubah propertinya. Properti tersebut dapat berupa value, placeholder, status disabled, atau bahkan name maupun id.

jQuery menyediakan .attr() untuk atribut HTML dan .prop() untuk properti DOM. Sering kali, .prop() lebih disarankan untuk atribut boolean seperti checked, disabled, atau selected.

Mengubah Status Bidang

Berikut contoh ketika kotak centang mengontrol apakah input teks diaktifkan atau dinonaktifkan. Kita menggunakan .prop() untuk mengubah properti disabled.

<label>
  <input type="checkbox" id="enable-input"> Enable Input
</label>
<input type="text" id="my-input" value="Hello" disabled>

<script>
$(document).ready(function() {
  $('#enable-input').on('change', function() {
    const isChecked = $(this).is(':checked');
    $('#my-input').prop('disabled', !isChecked); // Set disabled based on checkbox state
  });
});
</script>

Peristiwa pada Elemen Dinamis

Kesalahan umum: penangan peristiwa langsung (seperti $('#myButton').on('click', ...)) hanya terpasang pada elemen yang ada saat halaman dimuat.

Untuk elemen yang ditambahkan secara dinamis, Anda memerlukan delegasi peristiwa. Artinya, Anda memasang pendengar peristiwa pada elemen induk yang statis, lalu menentukan pemilih untuk elemen anak yang dinamis. Metode .on() milik jQuery menangani hal ini dengan sangat baik.

Contoh Praktis "Tambah Lagi"

Dengan menggabungkan apa yang telah kita pelajari, berikut pola yang umum: tombol 'Tambah Keahlian' yang memungkinkan pengguna mencantumkan beberapa keahlian, dengan setiap keahlian memiliki tombol 'Hapus' sendiri.

Perhatikan penggunaan data-id untuk identifikasi unik dan .closest() untuk menemukan induk yang akan dihapus.

<div id="skill-list">
  <div class="skill-item" data-id="1">
    <input type="text" name="skill[]" placeholder="Skill 1">
    <button class="remove-skill">Remove</button>
  </div>
</div>
<button id="add-skill">Add Skill</button>

<script>
$(document).ready(function() {
  let skillId = 1; // Unique ID for each skill item

  $('#add-skill').on('click', function() {
    skillId++;
    const newSkillItem = `
      <div class="skill-item" data-id="${skillId}">
        <input type="text" name="skill[]" 
               placeholder="Skill ${skillId}">
        <button class="remove-skill">Remove</button>
      </div>
    `;
    $('#skill-list').append(newSkillItem);
  });

  // Event delegation for remove buttons
  $('#skill-list').on('click', '.remove-skill', function() {
    // Prevent removing the very first skill if desired
    if ($('.skill-item').length > 1) {
      $(this).closest('.skill-item').remove();
    } else {
      alert("You need at least one skill!");
    }
  });
});
</script>

Pemeriksaan Formulir Dinamis

Uji pemahaman Anda tentang manipulasi formulir dinamis.

Ringkasan: Formulir Dinamis

Dalam pelajaran ini, Anda telah mempelajari cara membuat formulir lebih interaktif dan mudah digunakan dengan menambahkan, menghapus, serta mengubah bidang secara dinamis menggunakan jQuery.

Gunakan .append(), .prepend(), .after(), .before() untuk menambahkan elemen.
Gunakan .remove() untuk menghapus elemen.
Gunakan .attr() dan .prop() untuk mengubah atribut dan properti elemen.
Yang terpenting, gunakan delegasi peristiwa dengan .on() untuk peristiwa pada elemen yang ditambahkan ke DOM setelah pemuatan halaman awal.

Selanjutnya, kita akan membahas validasi formulir sisi klien!

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Manipulasi Bidang Formulir Dinamis” gratis?

Ya — teks lengkap “Manipulasi Bidang Formulir Dinamis” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus jQuery Academy, upgrade ke CoddyKit PRO. Kursus jQuery Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Manipulasi Bidang Formulir Dinamis”?

Pelajari cara menambahkan, menghapus, dan mengubah bidang formulir secara dinamis berdasarkan masukan pengguna untuk membuat antarmuka formulir yang adaptif dan interaktif menggunakan jQuery. Kamu berlatih jQuery Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai jQuery Academy?

Tidak diperlukan pengalaman sebelumnya. jQuery Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 3.

Berapa lama pelajaran “Manipulasi Bidang Formulir Dinamis” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran jQuery Academy ini?

Ya. Setiap pelajaran jQuery Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Manipulasi Bidang Formulir Dinamis
Logika Validasi Formulir Sisi Klien
Pengiriman dan Umpan Balik Formulir AJAX

← Kembali ke jQuery Academy