AJAX-TR.COM | Türkçe AJAX Kaynağı

Geçen hafta başladığımız Prototype.js yazı dizisine devam ediyoruz. İkinci bölümde Prototype'ın form elemanlarına erişim konusundaki yardımcı fonksiyonlarını inceliyoruz.

Form İşlemleri İçin Yardımcı Fonksiyonlar

Prototype'ın form elemanlarına erişim konusundaki yardımcı fonksiyonları ile özellikle AJAX uygulamalarında oldukça pratik sonuçlar alabilmekteyiz.

$F() Fonksiyonu

Yine $() fonksiyonuna benzer bir biçimde fakat bu defa spesifik olarak form elemanlarının değerlerine (.value) erişmemizi sağlayan oldukça kullanışlı bir fonksiyondur. "Form.Element.getValue" metodu ile aynı işlevdedir.

Şeklindeki bir form için aşağıdaki ifadeler yazılabilir:

$F("textfield");      // metin kutusunun (textfield) değerini dödürür
$F("areafield");      // metin alanının (textarea) içeriğini dödürür
$F("selectfield");    // açılır menülerde (dropdown) seçili değeri döndürür
$F("checkfield");     // İşaretli değilse “undefined” işaretli ise değeri döndürür

Böylece form elemanlarının değerlerine ID'leri vasıtası ile ulaşmak mümkün olmakta ve form manipülasyonları oldukça kolaylaşıp basitleşmektedir. Fakat bu fonksiyonun olumsuz bir özelliği; bazı nesnelere "$()" fonksiyonunda olduğu gibi doğrudan erişim olanağı vermemesidir. Bu durum radyo düğmelerinde seçili elemana doğrudan erişim imkânını olanaksız kılmaktadır. Radyo düğme gruplarından seçili değere ancak döngüler aracılığı ile ulaşılabilmektedir. Bu durumlar dışında fonksiyon ile ilgili bildirilen herhangi bir sorun bulunmamaktadır.

Form.getElements() Metodu

Gördüğünüz üzere "Form" objesinin bir metodu olarak çağrılan bu fonksiyon sayesinde ID'si aracılığı ile bir form etiketinin sahip olduğu tüm elemanları bir dizi değişken (array) şeklinde elde edebilmekteyiz.

TumFormElemanlari = Form.getElements("myform");
for(i = 0; i < TumFormElemanlari.length; i++) {
    // burada her bir form elemanı ile ilgili işlemler yaptırabiliyoruz
}

Burada "myform" un ilgili form etiketinin ID'si olduğunu unutmamalıyız, zira isimleri ile formlara bu fonksiyon aracılığı ile erişememekteyiz. Tüm form elemanlarına ihtiyacınız olduğu durumlarda bu fonksiyonun işlemleri nasıl kolaylaştıracağını düşündüğünüzde Prototype'ın değerini daha iyi anlayabilirsiniz. Örnek olarak bir form içindeki tüm checkbox'ları işaretleme fonksiyonu olan bir fonksiyon yazarak "Tümünü işaretle" veya "Hiçbirini işaretleme" işlevini şu şekilde yapabiliriz.

Bu şekilde bir formumuz olduğunu düşünelim. Bir düğmeye ya da linke tıklandığında formdaki bütün checkbox'ları seçtirmek / seçtirmemek için ufak bir fonksiyon yazıyoruz.

Gördüğünüz gibi düğmelerin "onclick" olayına (event) yazdığımız fonksiyonları çağırıyoruz. Böylece fonksiyonlara dolayısıyla form elemanlarına ulaşabiliyoruz.

Sayfalar: 1 2