 onSubmit, onReset eventleri
Form hazırladığımız durumlarda form bilgisi gönderilmeden kontrol edilmeli ve hatalı bilgilerin düzeltilmesi sağlanmalıdır. Bu işlemi formun submit butonuna basıldığı anda kontrol edecek fonksiyona yönledirerek sağlayabiliriz. Bu işlemi yapan event onSubmit dir.
Yine reset butonuna basılmasını kontrol eden even ise onReset tir. Bu event ile formun reset butonuna basıldığında çalışmasını istediğimiz fonsiyonu çağırabiliriz. Bir örnek üzerinde bu iki eventi kontrol edelim. Örneğimiz isim ve e-mail adresi sorsun; bu bilgilerden eksik olan olduğunda uyarsın, form silinmek istediğinde ise bu işlemin yapılmak istendiğinden emin olup olmadığı kullanıcıya sorulsun.
<html>
<head>
<title>onSubmit eventi</title>
<script>
<!-- gizle
function kontrol(){
var isim=document.bizimForm.isim.value;
var e_mail=document.bizimForm.email.value;
if(isim==null || isim=="") isim=false;
if(e_mail==null || e_mail=="") e_mail=false;
if(isim!=false && e_mail!=false){
alert("Bilgiler gönderiliyor.");
return true;
}
if(isim==false) {
alert("Lütfen isminizi yazınız");
return false;
}
if(e_mail==false) {
alert("Lütfen e-mail adresinizi
doğru olarak yazınız");
return false;
}
}
function eminMisiniz(){
return confirm("Tüm formun silinmesini onaylayın lütfen");
}
// gizleme sonu-->
</script>
</head>
<body>
<form name=bizimForm onSubmit="return kontrol()"
onReset="return eminMisiniz()">
isminiz : <input name=isim size=30 type=text><br>
e-mail : <input type=text name=email size=30><br>
<input type=submit value=gönder>
<input type=reset value=sil>
</form>
</body>
</html> onSubmit ve onReset eventleri form tagı içerisine yazılırlar. Hazırlanan fonksiyonların kontrol şekli programı yazana aittir. İsterse kontrol yapmaz ve isterse çok sıkı bir kontrol yapabilir.
Burada iki konuya değineceğim. Birinci konu; onReset ve onSubmit ile çağrılan fonksiyonlar geriye değer göndermek zorundadırlar. Bu değer true olduğunda işlem yapılır, false olduğunda ise işlem yapılmaz. Yani onSubmit ile çağrılan fonksiyon geriye false değeri gönderirse form gönderilmez, true değeri gönderirse form gönderilecektir. Bu işlem fonksiyon içerisinde gerekli görülen yerde return true veya return false yazılarak sağlanır. İkinci konu ise javascriptin onaylama kutusu olan confirm dir. confirm bir onay kutusu açar ve onaylama yapılmasını ister. Sonuç olarak true veya false üretir. Parametre olarak sadece onay sorusu kullanılır. return confirm("Lütfen formu onaylayınız."); Örneğimizde kontrol fonksiyonu şu işlemleri yapıyor. Öncelikle isim ve e_mail değişkenlerini açıyor ve form içerisindeki değerleri bu değişkenlere atıyor ve kontrol işlemine geçiyor. İlk kontrol isim değişkenine uygulanuyor.
if(isim==null || isim=="") isim değişkeni null ise yani bir değeri yoksa veya isim değişkeninin değeri boşluksa ki "" ile belirtilir sonuç olarak false değerini isim değişkenine atar.
Yine aynı şekilde e_mail değişkeni de kontrol edilir. Buradaki kontrol isim doğrumu e-mail adresi doğru mu? yerine sadece bu bölgelere bilgi girilmiş mi? sorusuna cavaptır. Eğer sonuçlardan ikiside doğru ise yani hem isim bölgesine ve hem de email bölgesine bilgi girilmiş ise
if(isim!=false && e_mail!=false) kontrolünün sonucu true çıkacak ve ekrana bilgiler gönderiliyor mesajı bir kutu içerisinde yazılacak ve form gönderilecektir. Aksi durumda hangi değer yazılmamış ise o değer kontrol edilirken kontrol kesilecek ve eğer isim yazılmamış ise lütfen isminizi yazın mesajı, e-mail yazılmamış ise lütfen e-mail adresinizi doğru yazın şeklinde bir uyarı ile forma geri dönülecektir. Yine eminMisiniz() fonksiyonu bir onay kutusu açıyor ve formu silmek istediğinizden eminmisiniz sorusunu soruyor sonucu ise geri gönderiyor. Sonuç evet-OK ise true, sonuç hayır-No ise false değeri geri gönderilecek; true sonucunda formun içeriği silinecektir.
 |
Javascript 
Bu içeriğe ait yorumları masaüstüne alabilirsiniz
