Bu yazı www.seoyarismasi.net adresinden alıntıdır.
Düzenlediğimiz formlarımızda javascriptle formda doldurulan bilgiler gönderilmeden önce (onSubmit) bazı kontrol işlemleri yaptırırız.Misal formda boş yer bırakılmış mı,yazılan email standartlara uygun mu gibi…
bu tarz işler de önce sorgularımızı oluştururuz;
function boslukkontrol(form1) {
if(form1.adsoyad.value == “”) {
alert(”Lutfen Ad/Soyad alanini doldurunuz.”)
form1.adsoyad.focus();
return false;
}
else if(form1.adres.value == “”) {
alert(”Lutfen Adres bölümünü doldurunuz.”);
form1.adres.focus();
return false;}
} |
Daha sonra bu sorguyu boslukkontrol.js olarak kayıt ederiz.Ardından oluşturduğumuz formun sayfasında
| <script type=”text/javascript” src=”www.siteniz.com/klasor/boslukkontrol.js”></script> |
kodunu ekliyerek sorguyu formumuza çağırmış oluruz.Ama işimiz bitmedi şimdide oluşturduğumuz forma demeliyizki sen verileri göndermeden önce bir bizim durumları kontrol et herşey tamam mı?
İşte bunun içinde formumuzu oluştururken
| <form name=”form1″ method=”post” action=”gidilecekyer.php” onsubmit=”return boslukkontrol()”> |
onSubmit değerine return komutunuda ekliyoruz. Zaten önceden boslukkontrol.js içerisinde hazırladığımız kodlarda da göreceğiniz gibi bizim formumuzda boş bırakılmaması gereken yerler boşsa return false; değeri döndürüyor tabi ki formlar doluysa da haliyle return değerimiz true olup verilerimiz gideceği yere gidiyor.
Şimdi herşey güzel; sitemizin ziyaretçisi butona tıklayıp veriler aktarılırken DINK! bizim uyarı çıkıyordu “lütfen boşlukları doldurunuz” diye.
Fakat gel gelelim ki dananın kuyruğunun koptuğu yer yakın dostumuz sevgili browserimiz Firefox bu uzaktan javascript dosyası çağırarak onSubmit kodunu işlemiyor.İnternet Explorer da gayet düzgün çalışan bu kod Firefox a gelince hiç yokmuş gibi form öyle hiçbir sorgulama olmadan verileri boş şekilde post ediyor.
Durumumuz anlaşıldığına göre konuyu fazla uzatmaya gerek yok:
ÇÖZÜM :
Dosya olarak formumuza davet ettiğimiz javascript dosyamız yerine kodları sitemizin html kodlarının içerisinde ( <head> </head> etiketlerinin arasında olmak şartıyla) kullanıyoruz.
<html>
<head>
<script type=”text/javascript”>
function boslukkontrol(form1) {
if(form1.txtisim.value == “”) {
alert(”Lutfen Ad/Soyad alanini doldurunuz.”)
form1.txtisim.focus();
return false;
else if(form1.adres.value == “”) {
alert(”Lutfen Adres bölümünü doldurunuz.”);
form1.adres.focus();
return false;}
}
</script>
</head>
</html> |
Evet şimdi gerekli kodları <head> etiketlerinin arasına yerleştirdikten sonrada oluşturacağımız forma da
| <form name=”form1″ method=”post” action=”gidilecekyer.php” onsubmit=”return boslukkontrol(this)”> |
kodunu ekliyerek sorunumuzu başarıyla çözmüş oluyoruz.
Sevgililer günü için içeriğimizde daha önceden de yer alan ve benimde kişisel olarak deneyip hediye aldığım istiridyeincihediye.com sitesinin anneler günü içinde özel bir hediye seti hazırladığını farkettim .