JQuery ve Php ile Form İşlemleri

 bcakir
 8 Eylül 2011

Merhaba arkadaşlar bu yazımda JQuery ve Php çiftiyle form işlemlerinin ne kadar kolay yapıldığını sizlere anlatan örnek bir uygulama yapacağım. Daha önce bu işlemi Ajax ile yaparken çok fazla kod yazmamız gerekiyordu. Ama şimdi JQuery kütüphanesinin Ajax ve diğer fonksiyonları sayesinde bu tür işlemleri yapmak çok kolaylaştı. Uygulamamızda forma girilen bilgileri Php betiğimize gönderip geriye sonuç döndüreceğiz. Bu konuyu daha önce anlatmıştım ama bu uygulamamızda fazladan form kontrolü yapmayı, girilen değerlerin nasıl kolayca alındığını, sunucumuza fazla yüklenilmesini engellemek için gönderme işlemi sırasında butonu pasif yapmayı ve bu gönderim işleminde yükleniyor resminin nasıl koyulduğunu anlatacağım. Uygulamamız size uzunmuş gibi gelebilir fakat bu işlem JQuery sayesinde çok az koda iniyor. Zaman kaybetmeden uygulamamızı yapmaya koyulalım.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>JQuery ve Php ile Form İşlemleri</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
function kontrol(){
    ad=$.trim($('#ad').val());
    soyad=$.trim($('#soyad').val());
    //Kutuların değer girilme kontrolü
    if((ad!="" && ad!="Ad") && (soyad!="" && soyad!="Soyad")){
        sondur();
    }else{
        $('#yaz').html('Kutuları boş bırakamazsınız.');
    }
}

function sondur(){
    //Butonu pasif yapma
    $('#btn').attr('disabled',true);
    yukleniyor();
    gonder();
}

function gonder(){
    //Verileri gönderme işlemi
    $.ajax({
        type:'POST',
        url:'veri.php',
        data:$('#form1').serialize(),
        success: function (msg) {
            //Dönen sonucu ekranda gösterme
            $('#yaz').html(msg);
            //Butonu aktif hale döndürme
            $('#btn').attr('disabled',false);
        }
    });
}

function yukleniyor(){
    //Veri gönderirken yükleniyor animasyonu gösterme
    $("#yaz").ajaxStart(function(){
        $(this).html('<img src="yukleniyor.gif" />');
    });
}
</script>
</head>
<body>
<form id="form1" style="display:inline;">
Ad: <input type="text" id="ad" name="ad" value="Ad" />
Soyad: <input type="text" id="soyad" name="soyad" value="Soyad" />
</form>
<input type="submit" id="btn" value="Kaydet" onclick="kontrol()" />
<div id="yaz"></div>
</body>
</html>

Yukarıda 4 tane fonksiyon oluşturarak JQuery tarafında ki işlemimizi tamamladık. Bu fonksiyonlar butonla tetikleniyor ve sırasıyla değer girilip girilmediği, girilmişse buton pasif edilmesi, yükleniyor resminin gösterilmesi ve değerlerin gönderilme işlemi yapılıyor. Eğer değer girilmemişse de uyarı mesajı gösteriyoruz. Burada en önemli fonksiyon serialize() fonksiyonudur çünkü bu fonksiyon sayesinde kaç tane form elemanı olursa olsun hepsinin değerini alıp arka arkaya uygun gönderilme düzenine getiriyor. Bu uygulamanın indirme linkini yazının en sonunda sizlere vereceğim çünkü yukleniyor.gif resmine ihtiyacınız var. Ama isterseniz buradan veya da buradan değişik yüklenme animasyonlarını da indirebilirsiniz. Şimdi de uygulamamızın veri.php sayfasını oluşturalım.

<?php
//veri.php olarak kaydedin
if(isset($_POST["ad"]) && isset($_POST["soyad"])){
    $isim=$_POST["ad"];
    $adres=$_POST["soyad"];
    sleep(1);
    echo "Veriler başarıyla geldi.";
}
?>

Yukarıda uygulamamızdan gelen verileri aldık ve geriye mesajımızı döndürdük. Siz isterseniz veritabanı bağlantı ve kaydetme kodlarını da ekleyerek tam bir uygulama yapabilir ve web sitesi yaparken çok kolay kullanabilirsiniz. Burada sleep(1) kullanmam dikkatinizi çekmiş olabilir. Bunu komutu kullanmamın nedeni; yükleniyor resminin tam görülmesini istememden kaynaklanıyor. Localhostda çalışırken veri transferi çok hızlı olduğundan ekranda kalmadan hemen geçiyor. Servera atarken kaldırabilirsiniz. Uygulamamızın açıklamasını da yaparak yazımızın sonuna geldik. Bütün kodun bulunduğu dosyayı buradan indirebilirsiniz. Yararlı bir yazı olması dileğiyle. JQuery, Az kod! Çok iş!

 15.294 Okunma

Bu yazıya 34 yorum yapılmış.

  1. küçük bir sorun var sanırım. formu boş gönderdiği zamanda veriyi alıyor. bunu kontrol etseniz iyi olur..

    • Boş gönderilip gönderilmediği kontrolünü şu kısımda yapıyoruz zaten
      //Kutuların değer girilme kontrolü
      if(ad!=”” && soyad!=””){
      sondur();
      }else{
      $(‘#yaz’).html(‘Kutuları boş bırakamazsınız.’);
      }

      • ama form alanı boş ikende kaydete basıldığında veri başarı ile geldi yazısı geliyor. serverdan kaynaklanan bir şey olabilir mi?
        deneme adresi:

        http://biglie.swiftphp.com/calisma/veri/verial.php

        • Uygulamada gerekli yeri sen eksiği söyleyince düzelttim. Sen de uygulamada uygun yeri aşağıdaki şekilde düzelt veya uygulamayı yukarıdaki yeni haliyle değiştir.
          ad=$.trim($(‘#ad’).val());
          soyad=$.trim($(‘#soyad’).val());
          //Kutuların değer girilme kontrolü
          if((ad!=”” && ad!=”Ad”) && (soyad!=”” && soyad!=”Soyad”)){

          • Teşekkür ederim. emeğine, klavyene sağlık : ))

            peki başka bir soru, aynı yöntemle database’e gönderme yapılabilir mi? bu size klasik bir soru olarak gelebilir. jquery’i öğrenmek istiyorum ama bana biraz karışık geliyor da : ))

          • veritabanı işlemlerini php dosyasında yapacaksın. php betiğinin en sonuna veritabanı bağlantı ve kaydetme işlemleri gibi işlemleri koyup sonucunu jquery ile aynı yöntemle alabilirsin.

  2. Gerçekten çok teşekkürler çok yardımcı olacak bir çalışma paylaşmışsınız.Yanlız benim bir sorum olacak butonu pasif yapıp phpden verileri çekip gösterdikten sonra butonu aktif olmuyor.$(‘#btn’).attr(‘disabled’); kodu ile olması gerekiyor ancak buton hala pasif durumda.Bu konuda yardımcı olabilirmisiniz.şimdiden teşekkürler tekrar emeğinize sağlık

  3. Az önce gönderdiğim yorum da butonun pasif kalma sorunu hakkında yardım istemiştim.Şimdi kendim denemeler yaparken Chrome da sorunsuz çalıştığını ancak İE sorun olduğunu farkettim.Bu konuda nasıl üstesinden gelebiliriz peki

    • Yukarıda bulunan uygulama her tarayıcıda çalışıyor, test edilmiştir.
      Butonun pasif yapılması: $(‘#btn’).attr(‘disabled’,true);
      Butonun aktif yapılması: $(‘#btn’).removeAttr(‘disabled’);

  4. İlgi ve alakanız için teşekkür ederim.Ancak İE9 sürümünde çalışmıyor.Aynı uygulamayı Chrome da denediğimde ise dediğiniz gibi sorunsuz çalışıyor.İsterseniz ekran görüntüsünü gönderebilirim.Bir çalışmam var bu uygulama ile ilgili araştırırken sizin örneğinizi buldum tam anlamıyla aradıığım şeydi ancak bu sorunu çözemiyorum

    • Bende ie9 da test ettim. Herhangi bir sorun vermedi. İstersen ben de ekran görüntüsünü atabilirim. Hatta atayım 😀
      http://i56.tinypic.com/ip9hdl.jpg
      Ama haklısın arkadaşımın bilgisayarından denettirdim buton aktif olmadı. Bazı bilgisayarlarda çalışmıyor demek ki, aşağıdakini dene.

      $(‘#btn’).attr(‘disabled’,false);

  5. Öyle sanırım bende anlam veremedim teşekkürler tekrardan:)

  6. Merhaba,
    Verileri veri.php adresine post etmek yerine veri.php?q=add adresine post etmek istersek ne yapmamız gerekiyor? Biraz araştırdım fakat bir türlü bulamıyorum.

    • İster url kısmına ekle parametreyi, istersen de data kısmına. İki türlüde olur.

      • url: ‘veri.php?q=userAdd’,
        şeklinde çalışmıyor. Data kısmında ise form serialize ediliyor. İkinci bir data satırı ekledim çalışmadı çünkü hali hazırda bir data satırı var zaten. Var olan data’ya(formun serialize edildiği) yeni bir query nasıl eklerim bilmiyorum?

        • data: ‘q=userAdd&’+$(‘#form1’).serialize(),

  7. Çok güzel bir uygulama. Yaptığım bütün projelerde bu uygulamayı kullanıyorum. Fakat bir projemde internet explorer ve mozillada problem yaşadım. Problem de şuydu; gönder butonuna bastığımda sayfa yenileniyor ve post edilen datalar adres çubuğunda url’nin sonuna ekleniyordu. Nedeni şu; butonunu tagından önce yazınca bu sorun oluyor. Bunu yaşamamak için buton kodunu tagından sonra yazmak gerekiyor.

  8. Türkçe karakter hatası alanlar; veri.php dosyasının başına

    header(“Content-Type: text/html; charset=windows-1254”);

    eklesinler.

    Ayrıca emeğiniz için teşekkürler. 🙂

  9. Ellerinize sağlık, çok kısa ve öz şekilde anlatmışınız.

  10. Merhabalar

    Öncelikle en kısa ve sade anlatım için tşk ederim.
    Benim bir sorum hatta sorunum var
    Şimdi ben yukarıdaki kodları özelleştirip kendime göre uyarlardım.
    Mesela fonksiyonları eledim (kontrol fonksiyonu)
    Ve url kısmındaki sabit değeri kaldırıp linkten değer gönderdim. Buraya kadar bir sıkıntı yok…
    Şimdi sorunum şöyleki
    Eğer aşağıdaki kodu kullanırsam yani formGonder fonksiyonunu çağırırsam formdaki input değerini post etmiyor ve haliyle hata veriyor

    function formGonder(gelenSf)
    {
    $(“input”).attr(‘disabled’,true);
    $(“#btn”).attr(‘disabled’,true);
    $(“#yaz”).html(“bekleyin…”);
    kayitYaptir(gelenSf);
    }

    function kayitYaptir(gelenSf)
    {
    $.ajax({
    type: ‘POST’,
    url: gelenSf,
    data: $(‘#kayitFormu’).serialize(),
    success: function(sonuc){
    $(“#yaz”).html(sonuc);
    $(“input”).removeAttr(‘disabled’);
    $(“#btn”).removeAttr(‘disabled’);
    $(“#btn”).val(“Kaydet”);
    $(“#sayi”).val(“”);
    $(“#z”).load(“tlp.asp?sf=zs”).fadeIn(“normal”);
    }
    });
    }

    eğer sadece kayitYaptir fonkisyonunu çağırırsam post ediyor
    çağırma işlemini ise onclick=”kayitYaptir(islemYap.asp?a=b)” olarak yapıyorum

    sizce nedendir ?

  11. teşekkürler

  12. Ben bu yolla dosya gondermeye calıştıgımda input un değişkenleri bulunamıyo neden acabaa

    • Dosya yükleme input kutusundan değeri alamazsın (dosya yolu). JQuery ile sadece çoklu dosya göndermeyi veya iframe dosya yüklettirme işlemi yaptırabilirsin. Dosya yükleme işlemini Php ile yaptırmak zorundasın (Asp ya da C# da olabilir)

  13. Eğer her formun yanına girilmedi mesajı ayrı ayrı çıkaramak isteseydik nasıl düzenlememiz gerekir.

    • En kolay JQuery form kontrolü yaparak yaptırabilirsin.

  14. formu dolduran kişiye otomatik mail gitmesi için nasıl bir kodlama yapmam gerekir?

  15. Merhaba; boşluk kontrolünü 15 den fazla alanı olan bir formda da mı tek tek kontrol ettirmem gerekir, daha kolay bir yöntemi yok mudur? Serialize ederken kontrol edip yollayamaz mıyız ya da serialize metodunun boş olanları ayıklama gibi bir özelliği var mıdır? Şimdiden teşekkürler.

  16. serialize güzelmiş ama serilize ile alınan veriler hızlıca nasıl kontrol edilir, yani hangisi boş hangisi dolu şeklinde bakarız.

    • submitHandler parameresi ile yapılıyor. Bu konuda sorulmuş soruya verilmiş yanıtı buradan inceleyebilirsin.

  17. Formdaki kısmında type=”button” olarak değiştirilirse daha iyi olur. Diğer türlü submit yapınca refresh oluyo ve tablı sitelerde default taba dönmesine neden olup sıkıntı yaratıyor.

  18. En güzel anlatım.

  19. Çok teşekkürler paylaşım için

  20. Hocam veri.php deki veriler birden çok sayfa ise jQuery ile 2. ve 3. sayfadaki verileri nasıl çağırabiliriz?

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

Daha fazla JQuery, Php
Kapat