10. Form İşlemleri

Web tabanlı uygulamalarda form işlemleri önemli bir yer tutmakta. Bu yazıda da javascriptle form verilerine nasıl ulaşabileceğimiz anlatıcam. Aşağıda formumuzda bir adet text inputu ve bir adet de submit butonu var. İsteğimiz veri submit edildiğinde javascript tarafından yakalanması. ilk kodumuzda bunu id üzerinden yapıyoruz.Butona basıldığında yaz() metodu çalışır ve ıd üzerinden input değerini yakalar. document nesnesi tüm HTML dökümanını temsil eder. document.getElementById(“sonuc”) ise sonuc id’sine sahip elementi yakalar ki id sadece bir elemente ait olabileceğinden daha sağlıklı bir yöntemdir.
document.getElementById(“ad”).value ile de inputta yer alan value çekilir.


<html>
 <head>
 
  <script>
   function yaz()
   {
    var isim;
    isim = document.getElementById("ad").value;//HTML document'inin içerisindeki 'ad' id'li inputun değerini çeker.
    alert(isim);
    document.getElementById("sonuc").innerHTML  = isim;//HTML document'inin içerisindeki 'sonuc' id'li elementin innerHTML'ini isim yapar.
   } 
  </script>
 
</head>
 <body>
  
   <form>
    Ad : <input type="text" id="ad"/> <br />
    <span id="sonuc"> </span>
    <input type="button" value="OK" onclick="yaz()"/>
    <input type="reset"/>
    </form>
  </body>
</html>

Aşağıdaki kodumuzda ise form mantığına daha uygun bir kodlama yapılmıştır. Ulaşılmak istenen input değerine form ismi üzerinden ulaşılmıştır. Önce form ismine daha sonra da input ismine ulaşılmış ardından da value ile inputların değerleri çekilmiştir. Yukarıdaki koddan farklı olarak bu kodta onsubmit( ); kullanılmıştır. Bu form submit butonuyla submit edildiğinde çalışacak fonksiyonu belirler. Kodun javascript tarafında inputlar yakalandıktan sonra if else koşul yapılarının içerisinde return false; ve return true; ifadeleri yer almaktadır. Bunlar formun doğrulanıp doğrulanmadığını döner. Yani aşağıdaki kodda kullanıcı adı veya parola girilmesiyle yahut parola 7 haneden kısayla formu doğrulama( return false; ) böyle bir durumla karşılaşılmazsa formu doğrula ( return true; ) denilmektedir.

<html>
  <head>
 
     <script>
     function bosmu()
     {
      var kul = document.giris.ad.value;  //HTML document'inin içerisindeki 'giris' isimli forma oradan da 'ad' isimli inputa ulaşıp valuesini çeker.
      var parola = document.giris.parola.value; //HTML document'inin içerisindeki 'giris' isimli forma oradan da 'parola' isimli inputa ulaşıp valuesini çeker.
     
      if(kul.length == 0) { alert("Kullanici adi bos birakilamaz"); return false;}
      if(parola.length == 0){ alert("Parola alanı bos gecilemez"); return false;}
      else if(parola.length <7) { alert("Parola 7 karakterden az olamaz"); return false; }
      else
      return true;
     }
     </script>
 
  </head>
 <body>
   
   <form name="giris" onsubmit="return bosmu()">
     Kullanici Adi : <input type="text" name="ad"/> <br/>
     Parola : <input type="password" name="parola" /> <br/>
     <input type="submit" value="yolla"/><input type="reset"/>
   
   </form>
 
  </body>
</html>

Aşağıdaki kodlarda kullanıcıdan Ad,Soyad ve Email bilgisi alınarak ekrana yazılmaktadır. Buradaki forma ulaşımda farklı bir yol izlenmiştir. Document nesnesi tüm HTML sayfasını temsil eder. document.forms[ ] ise HTML sayfasında bulunan tüm formlara dizi olarak ulaşmamızı sağlar. Her form otomatik olarak dizinin bir elemanı olur. document.forms[“test”] HTML sayfasındaki test name’ine sahip olan tüm formlardan bir dizi oluşturur. Daha sonra document.forms[“test”].elements [ index ] ile de form içerisindeki inputlara biz dizi yapısıyla ulaşır.

<html>
     <head>

          <script>
           function yaz( )
           {
           var formum = document.forms["test"];
           var boyut = formum.length;
           for(var i=0; i<boyut; i++)
           document.write(formum.elements[i].value + "<br>");
           }  
           </script>

      </head> 
   <body> 

    <form name="test">
       Ad : <input type="text" id="ad"><br>
       Soyad : <input type="text" id="email"><br>
       <input type="button" value="Yaz" onclick="yaz()">

    </form> 

     </body>
</html>

FORM VERILERININ DOGRULANMASI

Form ve form elemanları ile ilgili sıklıkla kullanılan metot, özellik ve olayları aşağıda kısaca vermeye çalışıcam.

form.Submit()   //Formun onaylanmasını sağlar.
form.Reset()   //Formun resetlenmesini sağlar.
value   //Form elemanının değeri.
name   //Form elemanının adı.
checked  //Form elemanının seçili ise "true" döndürür.
length  //Form elemanına girilen değerin uzunluğu.
onClick  //Form elemanına tıklandığında meydana gelen olay.
onSubmit  //Form onaylandığında meydana gelen olay.
onReset  //Form iptal edildiğinde meydana gelen olay.
onFocus  //Form elemanına tıklandığında meydana gelen olay.
onBlur  //Form elemanından başka bir form elemanına geçildiğinde ve form pasif hale geldiğinde meydana gelen olay.
onSelect  //Form elemanı seçildiğinde meydana gelen olay.
onChange  //Form elemanının değeri değiştiğinde meydana gelen olay.

-------------------------------
Başka sayfaya taşı eventler

HTML OLAYLARI (EVENTHANDLER)

Aşağıdaki olaylar gerçekleştiğinde fonksyion tetikleyebilirfsiniz
onload : sayfa yüklenmesi sırasında otomatik tetiklenir.
onunload : sayfa kapanması sırasında.
onresize : Sayfa boyutu değiştiğinde.
onerror : sayfada bir javascript hatası olduğunda.
onfocus : bir form elemanı aktif olduğunda.
onblur : bir form elemanı pasif olduğunda.
onchange : from elemanının değeri değiştiğinde.
onsubmit : form onaylandığında.
onreset : form resetlendiğinde.
oninvalid : forma girilen eleman geçerli değilse.
oninput : forma veri girilirse.
onclick – ondblclick : Bir elemana tek-cift tıklandığında
ondrag : bir eleman sürüklendiğinde.
onmouseover : Bir elemanın üzerine fare geldiğinde.
onmousemove : Elemanın üzerinde fare ile gezildiğinde.
onmouseup : Eleman üzerindeyken fare butonu bırakıldığında

Kategoriler

Son Yazılar