Web Programlama

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.

jquery-form-kontrolu-hazirlik

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:

jquery-form-kontrolu1
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.
jquery-php-bos-alan-kontrolu

 

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

 

Etiketler

Muharrem

Selçuk Üniversitesi Bilgisayar Sistemleri Öğretmenliği mezunu olan yazar bir kurumda yönetici olarak çalışmaktadır. Zaman buldukça fotoğraf çekmekten çok keyif almaktadır. Trabzonspor maçlarını izlemek en büyük zevklerindendir.

5 Yorum

  1. merhaba hazırlamış olduğun örneği kendi bilgisayarıma indirdim, gayet güzel çalışıyor fakat formu boş bırakıp gönder butonuna tıklayınca hata veriyor ama aynı zamanda hata ekranına tamam dedikten sonra action kısmında belirttiğim formgonder.php dosyasına yönleniyor buradaki sıkıntıyı çözemedim yardımcı olur musun?

  2. Merhaba,

    Yazımda belirtmiş olduğum kodları aynen uygularsanız sorun olmayacaktır.Dilerseniz iletişim sayfasından kodlarınızı gönderin sizin için bakmaya çalışayım.

    Selamlar.

  3. Bu kontrol özellikle üye kayıt olma sayfalarında çok iyi oluyor. Ziyaretçi daha kullanıcı adını yazarken varmı yokmu diye kontrol edilebiliyor.

  4. Hocam Allah razı olsun tam ama tam olarak istediğim kodu paylaştınız. Çok teşekkürler.

  5. Bu formu ile yapmanın yani vs. tablo kullanılarak yapılırsa güvenlik zaafı olur dedi bir php ci.Ancak nasıl yapılacağını soramadım ve bir daha da görüşemedim kendisiyle.Biraz trajikomik oldu ama size sorayım dedim.Başka türlü yani başka nasıl olur, normal divlerle yapılabilir mi?Nasıl?

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

 

Göz Atın

Kapalı
Başa dön tuşu
Kapalı
Kapalı