AJAX ile Eş Zamanlı Form Kontrolü

Kısaca konuyu anlatmak gerekirse eski usulde form kontrolünde tüm formu doldururdunuz ve bittiği zaman "Gönder" düğmesine basardınız. Eğer girmiş olduğunuz kullanıcı adı veya e-posta adresi başkası tarafından kullanılıyorsa ancak tüm formu doldurup gönderdikten sonra bunu öğrenebilirdiniz. Oysa ki AJAX ile o an doldurmuş olduğunuz metin kutusunu eş zamanlı olarak kontrol edilmesini sağlama imkanınız var. Yani kontrolü, gönder butonuna basmadan önce, form elemanı doldurulduğu anda yapabileceğinizi kastediyorum. Konuyu anlatırken AJAX-TR için hazırladığım ve AJAX Tab Kontrol ismini verdiğim örnek uygulamayı kullanacağım. İsmine "Tab kontrol" dedim çünkü Tab tuşuna basıldığı anda veya kutudan çıkıldığı anda kontrolün yapılışını anlatacağım.


Dosyalar
Uygulamada ana sayfayı oluşturan index.php dosyası, kontrolün yapıldığı ve bilginin gönderildiği kontrol.php dosyası ile eyceks kütüphanesinin dosyaları (loading.gif, eyceks.js) bulunmakta.

İlk Adım
Kontrol edeceğimiz formu index.php dosyasında oluşturuyoruz. Sadece bir metin kutusu bize yetecektir. Yanına da yeşillik niyetine parola kutusu koydum

PLAIN TEXTHTML:
<form action="void(0)" method="POST" name="form1">
<table>
<tr><td colspan="2"><b>ÜYE GİRİŞİ</b><br><br></td></tr>
<tr><td width="100">Kullanıcı Adı</td><td width="350">: </td></tr>
<tr><td>Parola</td><td>: </td></tr>
<tr><td></td><td></td></tr>
</table>
</form>
Dikkat ederseniz kullanıcı adı metin kutusunun onblur olayına kontrol_et() işlemini yapmasını belirttim. Bu kontrol_et() fonksiyonu form bilgisini kontrol.php dosyasına gönderecek olan fonksiyon. Aşağıda bu fonksiyonu açıklayacağım.

Formumuzu hazırladık diyelim. Bizim burada yapacağımız şey kontrol butonuna basılmadan kullanıcı adının girildiği kutuyu, biz parola hanesine geçerken kontrol edilmesini sağlamak. Kontrolde, girilen kullanıcı isminin var olup olmadığına bakılmasını ve kullanıcıyı buna göre uyarmasını istiyoruz.

İkinci Adım
AJAX Tab Kontrol'de bu sitenin yazarı eburhan'ın arkadaşımızın eyceks kütüphanesini kullandım.

Bu ikinci aşamada eyceks'i form kontolü yapacağımız index.php dosyasına çağıralım.

PLAIN TEXTJAVASCRIPT:
[/javascript]

Bu işlemi de tamamladıktan sonra sıra geldi <strong>Tab</strong> tuşuna bastığımızda işlemesi gereken javascript fonksiyonuna.

<h3>Üçüncü Adım</h3>
[javascript]function kontrol_et(){
var sc = 'uyeadi='+ document.form1.kullanici_adi.value;
JXP(1, "sonuc", "kontrol.php", sc);
}

İşte bu kodlarla tabtuşuna basılıp parola kutusuna geçerken eyceks kutuphanesini de kullanarak kontrol.php dosyasına kullanıcı adını POST metoduyla (JXP) yolladık. Gelecek olan cevabı da "sonuc" id'sine sahip elemanda görünecek şekilde ayarladık.

Son Adım
Son adım ise kontol.php dosyasını oluşturduğumuz kısım. Bu dosyada kontrolü dilediğiniz gibi ayarlayabilirsiniz. İster veritabanına bağlantı kurun, isterseniz de bir e-posta adresinin uygun yazılıp yazılmadığını kontrol edin. Burası size kalmış. Ben ise sadece 5 tane üye ismi belirledim ve girilen ismin bunlardan birisiyle aynı olup olmadığını kontrol ediyorum. Ne de olsa önemli olan mantığı kavramak

kontol.php

PLAIN TEXTPHP:
isim zaten mevcut :-(</font>';
break;
case "":
echo '<font>isim girmediniz!</font>';
break;
default:
echo '<font color="blue">isim uygun :-)</font>';
}

?&gt;

Sonuç
Umarım konuyu yeterince açık bir şekilde anlatabilmişimdir