Ajax Form İçinde Jquery Change Fonksiyon ve Anlık Sorgu Yapıp Forma Aktarma

Ajax Form İçinde Jquery Change Fonksiyon ve Anlık Sorgu Yapıp Forma Aktarma

Bu yazımda php ve jQuery işlemleri bir arada kullanarak anlık sorgulama ve ekrana yansıtma işlemi yapacağız.

Öncelikle form tagları arasına bir form yapısı olan select taglarını açıyoruz, Select taglarında bilindiği üzere option ile birden fazla değer verebiliyoruz option verilerini veritabanına bağlanarak birden fazla veriyi foreach döngüsü ile çağırıyoruz. Ayrıca döngü sırasında verilerimizin varsa id değerlerini value kısmına çağırıyoruz id değerlerini ajax ile başka bir sayfaya post olarak göndereceğiz. Foreach döngüsünden hemen önce Select değerini sıfır yapabilmek için value kısmı none olan bir seçenek oluşturuyoruz. Örnek;

 Daha sonra jQuery fonsiyonlarını oluşturuyoruz. İlk fonsiyonumuz change, bu fonksiyon formumuzda bulunan select içeriğinde herhangi bir seçim yada değişiklik varmı diye sorguluyor Sorgumuzu daha önce id değerini verdiğimiz select tagının id adını belirtiyoruz.

Sorgumuzda herhangi bir değişiklik olduğunda change içerisinde yazdığımız fonksiyonları devreye sokuyor burada if sorgusu ile select icerisinde value değeri none ile karşılaşırsa açık olan divimizi kapatacağın belirten ara fonksiyon yazıyoruz, böylelikle boş form gözükmeyecek.

 If sorgusunda none seçilmediği takdirde else ile ajax fonsiyonunu çalıştırıyoruz. Ajax ile önceden id değeri verdiğimiz select tagını serialize fonksiyonu ile seçili value değerini değişkene aktarıyoruz.

Daha sonra elde ettiğimiz değişkeni post yöntemi ile başka bir php sayfasına post ediyoruz,  post sonucu varsa success ile cevaplanan kısıma aktarıyoruz ve sonucu html ile daha önce id verdiğimiz div içerisine yazdırıyoruz; 

 Post gönderdiğimz denem.php sayfasını inceleyelim;

Gönderdiğimiz post değerini veritabanında sorgulayarak id değeriyle eşleşen sonucu form içerisinde bulunan kısımlara yazdırıyoruz. Elde edilen sonucu ajax yakalayarak sonuclar adlı divimizin içerisine yazıyor. Seçim değiştirilidiği zaman ise tekrar ajax devreye girerek value değerini post ediyor;

Seçim Yapalım;

Seçim sonucu yazdırma;

Fikir veya görüşleriniz aynı zamanda yardım için yorum yapmayı unutmayın. Teşekkürler..

Güncel Dosya Linki:İndir

Güncelleme: 26 Aralık 2018