eline saglık yararlı paylasım.

Bir formun aynı sayfada nasıl yollanacağını ve gnderi sonucunun bir kaç şık efektle nasıl gsterileceğini mi merak ediyorsunuz? Bu anlatımda bu işlemleri jQuery kullanarak nasıl yapabileceğiniz anlatılacak. Üstelik kullanıcının javascript desteği açık olmasa bile, form gnderim yapabilecek. AJAX teknolojisinin güzelliklerinin nasıl olsa biliyorsunuz. O halde formumuzu nasıl kodlayacağımıza geçelim. Oluşturacağımız form, kullanıcı gnderilerini kabul edecek, gnderileri işleyecek ve verileri process. php adlı bir dosyaya gnderecek. PHP betiği ise alıcıya bir uyarı postası gnderecek. Formu kullanacak olan kullanıcının javascript desteğinin kapalı olması ihtimali de gz nüne alınarak, form klasik yolla da işlenebilecek. 1. HTML Bu blümde iletişim formumuzun grünür kısmını oluşturuyoruz.<div class="block"><div class="done"><b>Teşekkür ederiz!</b> Mesajınız tarafımızdan alınmıştır. </div> <div class="form"> <form method="post" action="process. php"> <div class="element"> <label>Adınız</label> <input type="text" name="name" class="text" /> </div> <div class="element"> <label>E-Posta</label> <input type="text" name="email" class="text" /> </div> <div class="element"> <label>Websiteniz</label> <input type="text" name="website" class="text" /> </div> <div class="element"> <label>Mesajınız</label> <textarea name="comment" class="text textarea" /></textarea> </div> <div class="element"> <input type="submit" id="submit"/> <div class="loading"></div> </div> </form> </div></div><div class="clear"></div> 2. CSSFormumuzu 2 kolonlu olarak oluşturmak için CSS'ten faydalanıyoruz. body . clear . block . element . element label . element input. text . element. textarea . element. hightlight . element #submit . loading . done 3. JAVASCRIPT En sonunda işin sihirli kısmı olan Javascript kodumuz. Kodun hangi kısmının ne işe yaradığını gstermek için kodlara yorum satırları eklenmiştir. Bu blümümzde Javascript kullanarak e-posta, isim ve uzunluk onayları gibi işlemlerimizi yapıyoruz. Kodun yaptıklarını kısaca açıklayacak olursak: Kullanıcı girdilerini alırGirdileri kontrol eder, hata varsa ekrana bastırır ve işlemi durdururHiçbir hata yoksa, giriş kısımları pasifleştirilir ve veri jQuery'nin AJAX metoduyla yollanırjQuery veriyi process. php adlı dosyamıza GET metoduyla yollarprocess. php 1 ve 0 olmak üzere 2 sonuç dndürür. Sonuç 1 ise posta başarıyla gnderilmiş, 0 ise gnderilememiş demektirBaşarılı olunması durumunda form gizlenilir ve bir uyarı mesajı ekrana yazdırılır $ . ready(function { //gnder butonu tıklanmışsa $ . click(function { //Tüm alanlardan verileri al var name = $ ; var email = $ ; var website = $ ; var comment = $ ; //Kullanıcının birşeyler girip girmediği kontrol ediliyor //Hata bulunursa girdi alanına uyarı verdir if (name. val '') else name. removeClass ; if (email. val '') else email. removeClass ; if (comment. val '') else comment. removeClass ; //veriyi düzgünce organize et var data = 'name=' + name. val + '&email=' + email. val + '&website=' + website. val + '&comment=' + encodeURIComponent(comment. val ; //tüm girdi alanlarını pasifleştir $ . attr ; //yükleniyor işaretini gster $ . show ; //ajax işlemini başlat $. ajax({ //veriyi işleyen ve postayı gnderecek olan php dosyası url: "process. php", //GET metodu kullanılıyor type: "GET", //veriyi yolla data: data, //sayfayı nbelleğe alma cache: false, //işlem başarılı success: function { //eğer process. php 1/true değerini dndürmüşse if (html 1) else alert ; } }); //gnder butonunu iptal et return false; }); });4. PHPBu PHP dosyamız farklı türdeki gnderileri işleyebilir . Eğer kullanıcı formu jQuery aracılığı ile gndermişse process. phpverileri GET metodunu kullanarak alacaktır. Eğer kullanıcının javascript deteği kapalıysa, veriler POST metoduyla alınacaktır. <?php //Form verilerini al. //GET - kullanıcı veriyi AJAX kullanarak gnderdi//POST - kullanıcının javascript deteğinin olmadığınıda gz nüne alarak POST metodunu da kullanıyoruz$name = ? $_GET : $_POST ;$email = ?$_GET : $_POST ;$website = ?$_GET : $_POST ;$comment = ?$_GET : $_POST ; //hangi metodun kullanıldığına dair belirteç. Eğer POST kullanılmış ise değeri 1 yapif $post=1; //Sunucu taraflı veri kontrolü//E-Posta adresi kontrolüif $errors = 'Lutfen adinizi giriniz.';if $errors = 'Lutfen e-posta adresinizi giriniz.'; if $errors = 'Lutfen mesajinizi giriniz.'; //eğer hata dizisi boş ise postayı gnderif { //alıcı - bu blümü kendi adınız ve posta adresiniz ile değiştirin $to = 'Your Name <your@email.com>'; //Gnderen $from = $name. ' <' . $email. '>'; //Başlık ve mesaj $subject = $name. ' adlı kullanıcıdan bir mesaj var'; $message = ' <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. w3. org/TR/xhtml1/DTD/xhtml1-transitional. dtd"> <html xmlns="http://www. w3. org/1999/xhtml"> <head></head> <body> <table> <tr><td>Ad</td><td>' . $name. '</td></tr> <tr><td>E-Posta</td><td>' . $email. '</td></tr> <tr><td>Websitesi</td><td>' . $website. '</td></tr> <tr><td>Mesaj</td><td>' . nl2br . '</td></tr> </table> </body> </html>'; //postayı gnder $result = sendmail ; //POST metodu kullanılmışsa, mesajı gster if else //Hata dizisi boş değil ise} else //HTML başlıklarıyla basit bir mail fonksiyonufunction sendmail ?> Kodları indirmek için buraya, makalenin aslını okumak için şuraya tıklayabilirsiniz. DOM..

Teşekkürler. Asp olanını da bir ara ben yayınlarım :). Matematikçi ve Yazılımcı. http://www.ontedi.com ve http://www.cizgi.site Siteme beklerim herkesi.

Teşekkürler. Gze hoş gzüküyor.

rnek:http://www.queness.com/resources/html/ajaxform/jquery-ajaxform. php DOM..