Entere Basınca Submit Etmek

Entere Basınca Form submit etmek

Formlarımızda ya da arama kutularımızda metni yazdıktan sonra fare ile butona basmak kullanıcılar için gerçekten çok zahmetli bir iş. Bu yüzden formlarımıza mutlaka Enter‘e basarak submit işlemini tetiklemeyi eklemeliyiz. Bu sayede hem kullanıcıları mutlu etmiş olacağız hem de zaman kazandırmış olacağız. Kullanıcı memnuniyetinin böyle küçük ayrıntılarda olduğunu unutmamamız gerekli.

Yapacağımız işlem oldukça basit.  Textbox‘un onkeydown eventini javascript kullanarak sorgulayacağız. Eğer basılan tuş Enter ise submit işlemini gerçekleştireceğiz. Enter‘in key code karşılığı 13’tür. Redirect() fonksiyonu ile gidilmesi istenen adrese yönlendirmemizi yapıyoruz.

<html>

<script type="text/javascript" >
function Redirect() {
window.location = "http://www.gidilecekadres.com/arama.aspx?q=" + document.getElementById("search").value;
};
</script>

<body>
<div id="searchbox" >
<input id="search" type="text" placeholder="Oyun Ara" onkeydown="if (event.keyCode == 13) { Redirect(); }" />
<input id="submit" type="submit" value="Ara" onclick="Redirect()" />
</div>
<body>

</html>

Javascript ile Alert Kullanarak Textbox’a Girilen Değeri Ekrana Basmak

Java script ile textboxdaki değeri alert ile ekrana basmaBu örneğimiz oldukça basit ama temel olarak Javascipt ile tanışanlar için güzel bir örnek.

Öncelikle bir adet Textbox ve Buttonumuz var. Amacımız butona basıldığında Textbox‘daki değere erişip Alert ile ekrana bastırmak.

Bunu yapabilmek için öncelikle onclick eventinden yararlanıyoruz. Bu event ile butonumuza basıldığında hangi Javascript kodunun çalışacağını belirttik. (Örneğimizde EkranaBas() fonksiyonu çalıştı.)

EkranaBas fonksiyonu ise id’si “kutu” olan nesnenin value değerini getirmektedir. Son olarak bu gelen değeri ekrana Alert kullanarak ekrana basıyoruz.


<html>

<!-- Java script kısmı Fonksiyon tanımladım id'si "kutu" olan tagin value'sunu alert ile ekrana basıyor. -->
<script type="text/javascript" >
function EkranaBas()
{
alert(document.getElementById("kutu").value);
}
</script>

<body>
<!-- HTML input kısmı butona basınca EkranaBas fonksiyonunu çağırıyor-->
<input type="text" id="kutu"><br>
<input type="submit" value="Bana Tıkla" onclick="EkranaBas()">
</body>

</html>

Bu küçük örnekte eş zamanlı Alert kullanımı, Fonksiyon kullanımı, ve document nesnesini kullanarak id’sinden elemanlara erişmeyi öğrendik.

JavaScript ile Cookie (Çerez) Kullanımı

javascript cookie çerez kullanımı Cookieleri sık kullanıdığımız sayfalarda cookie oluşturmak ve okumak için Javascript fonksiyonu tanımlamak yararlı olur.
Aşağıda setCookie ve getCookie tanımlanmıştır. setCookie sırasıyla cookie ismi, cookie’nin değeri ve ne kadar süre saklanacağı parametrelerini almaktadır.

 
 
 


<script type="text/javascript" charset="utf-8">
function setCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    }
    else var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}

function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}
</script>

 
Sonrasında bu fonksiyonları kullanarak cookie’mizi okuyalım ve alert ile ekrana yazdıralım, eğer bulamazsak cookie oluşturalım.


<script type="text/javascript" charset="utf-8">
    var cerez1Deger = getCookie("cerez1");

    if (cerez1Deger == null) {       
        setCookie("cerez1", "deger", 1);
    }
    else{
    alert("Çerez bulundu:"+cerez1Deger);
    }
</script>

Javascript ile Tarayıcı Belirleme

tarayıcılarJavascript kullanarak kullanıcının hangi tarayıcıyı kullandığını belirleyebilirsiniz.

Aşağıdaki kod ile Internet  Explorer, Firefox, Chrome ve Yandex tarayıcıları ayırt edebilirsiniz.

Dilerseniz kendiniz diğer tarayıcıları da ekleyebilirsiniz


<script type="text/javascript">

var browser= "Belirsiz";

if(navigator.appName=="Microsoft Internet Explorer")
{
browser="ie";
}
else if(navigator.userAgent.toLowerCase().indexOf('yabrowser') > -1){
browser="yandex";
}
else if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1){
browser="chrome";
}
else if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1){
browser="firefox";
}
alert("Tarayıcınız: "+browser);

</script>

JavaScript Mail Formatı Kontrolü

Javascript ile formlardaki mail boxlarımızın, gönderilmeden önce uygun formatta olup olmadığı kontrolünü yapabiliriz. Bu sayede sunucuya göndermeden kullanıcıya hata bilgisini verebiliriz.

Dikkat: Güvenlik için her zaman sunucu tarafında da kontrol yapmamız gereklidir. Kullanıcı Javascript’leri kapatabilir dolayısı ile kontrollerimiz deaktif yapılabilir..


</head>
<script type="text/javascript">

function mailKontrol()
{
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var mail = document.getElementById("mail").value;
if(reg.test(mail) == false) 
    {
      alert('Hatalı Mail Formatı!');
      return false;
    }
else{
      alert('Dogru Mail Formatı.');
      return true;	  
    }
}

</script>
</head>

<body>
<form id="frm">

<input type="text" id="mail" /> Mail: </br>
<input type="button" value="gönder" onclick="mailKontrol()" />

</form>
</body>

JavaScript Form Boş mu Kontrolü

Javascript ile formlarımızın gönderilmeden önce boş mu kontrolünü yapabiliriz. Bu sayede sunucuya göndermeden kullanıcıya hata bilgisini verebiliriz.

Dikkat: Güvenlik için her zaman sunucu tarafında da kontrol yapmamız gereklidir. Kullanıcı Javascript’leri kapatabilir dolayısı ile kontrollerimiz deaktif yapılabilir..


</head>

<script type="text/javascript">

{
if(document.getElementById("ad").value=="")
	{
	alert("Ad boş!");
	}
else if(document.getElementById("soyad").value=="")
	{
	alert("Soyad boş!");
	}
else
	{
	alert("Hepsi Dolu...");
	}
}

</script>

</head>


<body>

<form id="frm">
<input type="text"  id="ad" /> Ad: </br>
<input type="text"  id="soyad" /> Soyad: </br>
<input type="button" value="gönder" onclick="islem()" />
</form>
</body>