jQuery Academy · Ders

Dinamik Form Alanı Değiştirme

jQuery kullanarak kullanıcı girdisine göre form alanlarını dinamik biçimde eklemeyi, kaldırmayı ve değiştirmeyi öğrenin; uyarlanabilir ve etkileşimli form arayüzleri oluşturun.

Dinamik Form Alanı Değiştirme, CoddyKit'te ücretsiz bir jQuery Academy dersidir. Bu, 3 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, jQuery Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. jQuery Academy kursu toplamda 3 dersten oluşur.

Dinamik Formlar: Neden ve Nasıl?

Formlar genellikle statiktir; ancak modern web uygulamaları etkileşimle gelişir. Dinamik form alanı düzenleme, bir formun yapısını gerçek zamanlı olarak değiştirmenizi sağlar.

Bu sayede kullanıcı sayfanızla etkileşim kurarken input alanları ekleyebilir, kaldırabilir veya değiştirebilirsiniz. Böylece kullanıcı deneyimi büyük ölçüde iyileşir ve formlar daha uyarlanabilir hâle gelir!

Alan Ekleme: Temel Bilgiler

Alan eklemenin temelinde yeni HTML öğeleri oluşturmak ve bunları Belge Nesne Modeli'ne (DOM) eklemek yatar.

Öğeler oluşturmak için jQuery kullanın (ör. $('')).
Bunları formunuz içinde tam olarak konumlandırmak için .append(), .prepend(), .after() veya .before() gibi yöntemleri kullanın.
Yeni alanlara uygun name öznitelikleri vermeyi unutmayın; bu, özellikle sunucu tarafındaki işlemler için önemlidir.

Yeni E-posta Girdisi Ekleme

Tıklandığında yeni bir e-posta giriş alanı oluşturan bir düğme ekleyelim. HTML dizesini nasıl oluşturduğumuza ve ardından eklediğimize dikkat edin.

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

Alanları Kaldırma: Temizleme

Kullanıcıların alan eklemeye ihtiyaç duyabileceği gibi, alanları kaldırmaları da gerekebilir. Bu, formu temiz ve ihtiyaçlarıyla ilgili tutar.

jQuery'nin .remove() yöntemi bunun için idealdir. Seçilen öğeleri, ilişkili verileri ve olay işleyicileriyle birlikte DOM'dan tamamen kaldırır.

Belirli Bir Girdiyi Kaldırma

Şimdi önceki örneğimizi genişletelim. Her e-posta alanının yanına bir "Kaldır" düğmesi ekleyeceğiz. Bu düğmeye tıklamak, ilgili alanı silecektir.

Önemli: Dinamik olarak eklenen "Kaldır" düğmelerindeki olayları nasıl ele aldığımıza dikkat edin!

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

Alanları Değiştirme: Öznitelikleri Düzenleme

Bazen bir alanı eklemeniz veya kaldırmanız gerekmez; yalnızca özelliklerini değiştirmeniz yeterlidir. Bu özellik value, placeholder, disabled durumu veya name ya da id olabilir.

jQuery, HTML öznitelikleri için .attr(), DOM özellikleri için ise .prop() sağlar. checked, disabled veya selected gibi doğru/yanlış değer alan özniteliklerde genellikle .prop() tercih edilir.

Alan Durumunu Değiştirme

Burada bir onay kutusunun, bir metin girişinin etkin veya devre dışı olmasını denetlediği bir örnek yer alıyor. disabled özelliğini değiştirmek için .prop() kullanıyoruz.

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

Dinamik Öğelerde Olaylar

Yaygın bir tuzak şudur: doğrudan olay işleyicileri (örneğin $('#myButton').on('click', ...)) yalnızca sayfa yüklendiğinde mevcut olan öğelere bağlanır.

Dinamik olarak eklenen öğeler için olay yetkilendirmesi kullanmanız gerekir. Bu, olay dinleyicisini sabit bir üst öğeye bağlamak ve ardından dinamik alt öğeler için bir seçici belirtmek anlamına gelir. jQuery'nin .on() yöntemi bunu oldukça kolay bir şekilde gerçekleştirir.

"Daha Fazla Ekle" Uygulama Örneği

Öğrendiklerimizi birleştirelim. Kullanıcıların birden fazla beceriyi listelemesini sağlayan ve her becerinin kendine ait bir "Kaldır" düğmesi bulunan "Beceri Ekle" düğmesi, yaygın bir örüntüdür.

Benzersiz tanımlama için data-id kullanımına ve kaldırılacak üst öğeyi bulmak için .closest() kullanımına dikkat edin.

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

Dinamik Form Kontrolü

Dinamik form düzenleme konusundaki anlayışınızı sınayın.

Özet: Dinamik Formlar

Bu derste jQuery kullanarak alanları dinamik biçimde ekleyip kaldırarak ve değiştirerek formları nasıl daha etkileşimli ve kullanıcı dostu hâle getireceğinizi öğrendiniz.

Öğe eklemek için .append(), .prepend(), .after() ve .before() kullanın.
Öğeleri silmek için .remove() kullanın.
Öğe özniteliklerini ve özelliklerini değiştirmek için .attr() ve .prop() kullanın.
Özellikle, ilk sayfa yüklemesinden sonra DOM'a eklenen öğelerdeki olaylar için .on() ile olay yetkilendirmesi kullanın.

Sırada istemci tarafı form doğrulamasını ayrıntılı olarak inceleyeceğiz!

Sıkça Sorulan Sorular

“Dinamik Form Alanı Değiştirme” dersi ücretsiz mi?

Evet — “Dinamik Form Alanı Değiştirme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve jQuery Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. jQuery Academy kursu toplamda 3 dersten oluşur.

“Dinamik Form Alanı Değiştirme” dersinde ne öğreneceğim?

jQuery kullanarak kullanıcı girdisine göre form alanlarını dinamik biçimde eklemeyi, kaldırmayı ve değiştirmeyi öğrenin; uyarlanabilir ve etkileşimli form arayüzleri oluşturun. jQuery Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

jQuery Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te jQuery Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 1. dersidir.

“Dinamik Form Alanı Değiştirme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu jQuery Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her jQuery Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← jQuery Academy Sayfasına Dön