jQuery ve Php İle Anında Form Kontrolü

Web programlama ile henüz yeni tanıştım bu sebeple ihtiyacı olan arkadaşlar faydalansın diye yazıyor olduğum yazımda kusurlarım olursa affola…

Öğreniyor olduğum php programlama ile ufak tefek çalışmalar yaparken kullanıcının dolduracağı bir form olsun  ve bu formdaki bilgilerin tamamı doldurulduktan sonra işlem yapılsın istedim.Form kontrolü yapmak için jQuery kullandım.Şimdi isterseniz adım adım neler yaptığıma bakalım.

1)Öncelikle dosyalarımı localde çalıştırmak için kullanmakta olduğum wampserver içerisindeki www klasörünün altında ‘dene’ adında bir klasör oluşturdum.Siz nasıl adlandırmak isterseniz o şekilde adlandırabilirsiniz.

2)Sonra index.php adlı dosyamızın içerisinde html kodlarımızla form içerisinde aşağıdaki gibi bir form oluşturuyoruz:

Yukarıda görmüş olduğunuz formu aşağıdaki kodlarla oluşturabilirsiniz.Bu adımda dikkat etmenizi istediğim en önemli nokta her html nesne için bir id tanımlamış olduğumuzdur.

//tüm alanlar doldurulmadığı sürece onsubmit="return false" olsun ki formumuzu post etmesin
<form name="kanekle" action="harici/islem.php?islem=ekle" method="post" onsubmit="return false;" id="form">
  <table width="400px" >
  <tr>
    <td>Adınız*</td>
    <td><input type="text" name="ad" id="ad1"/></td>
  </tr>
  <tr>
    <td>Soyadınız*</td>
    <td><input type="text" name="soyad" id="soyad1"/></td>
  </tr>
  <tr>
    <td>Cinsiyetiniz*</td>
    <td><input id="cinsiyet1" type="radio" name="cinsiyet" value="erkek"/> Erkek <input type="radio" name="cinsiyet" value="kız"/> Kız
    </td>
  </tr>
  <tr>
    <td>Kan Grubunuz*</td> //örnek olması için iki kan grubu yazdım,diğerlerini siz ekleyebilirsiniz
    <td><select name="grup" id="grup1">
    <option value="0">Seçiniz</option>
    <option value="0 Rh (+)">0 Rh (+)</option>
    <option value="0 Rh (-)">0 Rh (-)</option></select>
</td>
  </tr>
  <tr>
    <td>Adresiniz*</td>
    <td><textarea rows="5" cols="30" name="adres" id="adres1"></textarea>
    </td>
  </tr>
  <tr>
    <td>Telefon Numaranız*</td>
    <td><input type="text" name="tel" id="tel1"/></td>
  </tr>
  <tr> 
 <td>&nbsp;</td>
    </tr>
  <tr>
    <td>&nbsp;</td> //butona tıklandığında kontrolet() fonksiyonumuzun çalışmasını istiyoruz
    <td><input onclick="kontrolet()"  type="submit" value="Ekle" style="cursor:pointer"/></td>
    </tr>
</table>

</form>

3)Şimdi formdaki alanlarımızın boş geçilmemesi adına jQuery ile kontrol işlemlerini yapmak için kodlarımızı yazacağız.
Formumuzu oluştururken nesnelere verdiğimiz idleri kullanarak girilen değerleri alıp tek tek değişkene atıyoruz.jQuery trim yapmasaydık kullanıcı formdaki alanlara boşluk bırakarak bu alanları doldurmuş gibi olurdu.

<script type="text/javascript">

	function kontrolet(){
                var ad=$('#ad1').val();
                       //jQuery.trim ile girilen değerin varsa sağ ve solundaki boşlukları temizliyoruz 
			ad=jQuery.trim(ad);
		var soyad=$('#soyad1').val(); 
			soyad=jQuery.trim(soyad);
		var cinsiyet=$('input:radio[name=cinsiyet]:checked').val();
		var kgrup=$('#grup1').val();
		var adres=$('#adres1').val();
			adres=jQuery.trim(adres);
		var tel=$('#tel1').val();
			tel=jQuery.trim(tel);

		if(ad==''){
			alert("Lütfen bir ad belirtiniz");
			} 
			else if(soyad==''){
				alert("lütfen bir soyad belirtiniz");
				}
			 else if(cinsiyet!='erkek' && cinsiyet!='kız' ){
				alert("bir cinsiyet belirtiniz");
				}	
			else if(kgrup=='0'){
				alert("bir kan grubu belirtiniz");
				}
			else if(adres==''){
				alert("bir adres belirtiniz");
				}
			else if (tel==''){
				alert("bir telefon belirtiniz");
				}
                        //ekle butonunda bulunan onclick="kontrolet()"fonksiyonunu kaldırıyoruz ki formumuza girilen değerler post edilebilsin
			else { $('#form').removeAttr("onsubmit"); } 
		}

</script>

Eğer tüm alanlar boş iken ekle butonuna basarsanız aşağıdaki gibi uyarı alırsınız.Ad kısmını doldurup sonrasında ekle butonuna basarsanız bu kez “lütfen bir soyad belirtiniz” şeklinde sırasıyla uyarı alacaksınız.

Yapılan bu örneğin dosyalarını indirmek için buraya tıklayınız.