Javascript - OnChange - PcTekno.NET | PTN

Konumunuz: Anasayfa

Javascript - OnChange

Pazartesi, 09 Temmuz 2007

Sample Image Text, textarea, secim kultularında bir değişiklik olduğunu anlayan event onChange dir. Bir text alanına bilgi girildiğinde içeriği değişir, bu durumda bir hareket oluşacaktır.

Bu durum özellikle menü hazırlarken işimizi kolaylaştıran bir haldir. Bu nedenle bir menü içerisinde onChange eventini görelim.

 
<html>
<body>
<head>
<title>onChange eventi</title>
<script language="javascript">
<!-- eski browserlerden gizle
function git(){
adres=
  document.menuForm.secim[document.menuForm.secim.selectedIndex].value;
window.location=adres;
     }
// gizleme sonu-->
<script>
</head>
<body>
<form name=menuForm>
<select name=secim onChange="git()">
<option>Gideceğiniz bölüm
<option value="http://www.webtasarimrehberi.com">webtasarimrehberi.com
<option value="http://www.kadineli.com/">kadineli.com
<option value="http://www.kocaeliden.com/">kocaeliden.com
</select>
</form>
</body>
</htmle>

Hazırladığımız formun içeriği değiştiğinde onChange eventi git() fonksiyonunu çağırıyor. git() fonksiyonu ise formun yeni içeriğine göre seçilen adrese gidiyor. Bunun için bir menü formun ürettiği değeri bulmayı görelim:

adres=document.menuForm.secim[document.menuForm.secim.selectedIndex].value;

aslında document.menuForm.secim.value; bize bir menü içerisindeki textalanının değerini verecektir. Fakat bir seçim menüsü olduğu zaman bu menünün içeriği bir indexte tutulur. selectedIndex adı verilen bu index ile yapılan seçimin sonucu görülecekti. selectedIndex i kullanırken öncelikle forma ulaşmak için gerekli olan;

document.menuForm.secim yazılımını yazıyoruz. Böylece menuForm unun secim adlı kutusuna ulaşıyoruz. secim

bir seçim kutusu olduğuna göre bu kutunun o anki değerini elde etmek için selectedIndex elemanından yararlanıyoruz.

[ducument.menuForm.secim.selectedIndex] bu şekilde bir yazım menuForm.secim.selectedIndex elemanını verir. Bütün bu işlemden sonra .value; yazarak sectedIndex le elde etiğimiz secim kutusunun value değerini buluruz. Böylece yönelendirme yapacağımız adresi elde etmiş oluyoruz.

Burada window.location= şeklinde bir yazılım browserin hangi adrese yönlendirileceğini belirtir. Çift tırnak içerisinde gidilecek adres yazıldığında browser yeni adrese gidecektir.

Yorumlar (0) Add Comment