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

}

?>

Sonuç

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

Hancı Eğitim

AJAX Dersleri

Ara

Eğitim

Konular

Tags