Şimdi bir form içeren sayfa örneği yapalım; Javascript ile formun tamamen doldurulmuş olup olmadığını sınayalım. Böylece ziyaretçinin göndereceği formun eksik olduğunu anlamakta geç kalmamış oluruz. Aşağıdaki kodu, form01.htm adıyla kaydedip, Browser?da bir yerini eksik olarak duldurun ve Gönder düğmesini tıklayın.
<html>
<head>
<title>Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<script LANGUAGE="JavaScript1.2">
function denetle() {
var num = document.form1.elements.length
var dogruMu = true
for (var i=0; i<num; i++) {
if ((document.form1.elements[i].value == null ||
document.form1.elements[i].value == "") &&
(typeof document.form1.elements[i] != 'submit' ||
typeof document.form1.elements[i] != 'reset'))
{
dogruMu = false
alert("Formdaki " + document.form1.elements[i].name +
" alanı doldurulmamış bulunuyor. Lütfen doldurunuz!")
break }
}
return dogruMu
}
// -->
</script>
</head>
<body>
<form name="form1" method="POST" onSubmit="return denetle()">
<h2>Abone Formu</h2>
<p>Adınız:<br>
<input type=text size=25 maxlength=256 name="Abone_Adı"><br>
İlgi Alanı:<br>
<input type=text size=25 maxlength=256 name="İlgi"><br>
<strong>Oturduğunuz İl: <br></strong>
<input type=text size=25 maxlength=256 name="İl"><br>
<strong>Elektronik Posta Adresiniz: <br></strong>
<input type=text size=25 maxlength=256 name="ElektronikAddress"></p>
<input type=submit value="Gönder"> <input type=reset value="Sil">
</form>
</body>
</html>
Daha önceki örneklerden hatırlıyorsunuz; formun içerdiği bilgilerin gerçekten Server?a gitmesi için gerekli “submit” olayının önünü kesebilmek için kullandığımız “onSubmit” olayına bağlı fonksiyonun “return” ifadesiyle, kendisini görevlendiren olay-yönlendiriciye bir sonuç bildirmesini sağlamak zorundayız. Fonksiyonu biraz irdelersek, başta tanımladığımız Boolean değişkeni “dogruMu” bize doğru-yanlış türü bir sonuç vermek zorunda; ziyaretçi herşeyi doldurmuşsa (yani her alana hiç değilse bir harf yazmışsa!) bu değişkenin değeri değişmiyor. Fakat “if” sorgulamasında düğme olmayan unsurlardan birinin değeri boşsa (yani null veya “” ise) değişkenin değeri false olacaktır. “if” sorgulamasını kaç kere yapacağız? Bu sayıyı, belgenin form elemanlarının yazıldığı dizi-değişkenin büyüklüğünden (document.form1.elements.length) öğreniyoruz, ve num adlı değişkene yazıyoruz. Dolayısıyla Forma yeni alanlar da eklesek, fonksiyonu yeniden yazmamıza gerek yok. Sonra, i adını verdiğimiz bir sayaç, num değişkeninin değerine eşit oluncaya kadar, elements dizi-değişkenindeki (submit ve reset dışındaki) bütün elemanların değerlerin boş olup olmadıklarına bakıyoruz. Bu değerlerden herhangi biri boş ise, if döngüsü o noktada kesiliyor ve ziyaretçiye bir uyarı kutusu ile formu doldurmasını hatırlatıyoruz. Bu arada uyarı kutumuz, boş olan alanın adını da bildiriyor. Bunu, if döngüsü kesildiği andaki i değişkeni değerindeki form elemanının adını alarak yapıyoruz.
Buradaki örnekte düğme (button) nesnesinin Click olayını onClick yönlendiricisi ile yakaladık. Form nesnesindeki diğer nesnelerden metin (text) ve metin alanı (textarea) nesneleri, onBlur, onChange, onFocus, onSelect yönlendiricileri ile; işaret kutusu (checkbox) ve radyo düğmesi (radio) onClick yönlendiricisi ile, seçme listesi (select) onBlur, onChange ve onFocus yönlendiricileri ile fonksiyon çağırabilirler.
Javascript fonksiyonlarımızda Form nesnesinin işaretleme kutularından hangisinin işaretlenmiş olduğunu belirlemek işaretli unsurun değerlerini bulabilmek, değiştirebilmek veya başka bir yerde kullanabilmek için önem taşır. Browser, ele aldığı bir HTML sayfasındaki Form nesnesinin unsurlarını ve burada CHECKBOX nesnesini bir dizi-değişkenin içinde tutar; bunlardan işaretlenmiş olanın CHECKED (işaretli) özelliğini True (doğru) yapar. Bu durumdan yararlanarak istediğimiz kutunun işaretli olup olmadığını sorgulayabiliriz. Burada nesnenin “.value” özelliği işe yaramaz; çünkü kutu işaretli olsa da olmasa da “.value” özelliği aynıdır. İşaretleme kutularında bilmek istediğimiz husus, bu nedenle işaretli olup olmadıklarıdır. Örneğin, sayfamızda, “form1” adlı bir formda “isaret01” adlı bir işaret kutusu varsa, bu kutunun işaretli olup olmadığını şu if döngüsü sınayabilir:
if (document.form1.isaret01.checked) {
.......
Bu ifade, kutu gerçekten işaretli arzu ettiğimiz bir işi yapar, değilse yapmaz.
Hakkı Öcal Javascript dersleri