Dinamik Olarak Form Elemanı Ekleme, Silme, Yazma ve Gönderme – Bölüm 3

 bcakir
 8 Haziran 2011

Merhaba arkadaşlar, uygulamamızın son aşamasına geldik. Bu makaleyle uygulamamız tamamlanmış olacak. Şuana kadar yaptıklarımızı hatırlayacak olursak divin içine textbox eklemeyi, divi silmeyi ve textboxlardaki değerleri birleştirip ekrana yazmayı anlatmıştım. Bu makalede ise bu verileri veri.php dosyasına gönderip orada parçalayıp eski haline getireceğiz. Yani verileri PHP ile tekrar dizi şekline dönüştüreceğiz. İsteyen arkadaşlar bu php dosyasına database erişim kodlarını ekleyerek databasede kaydettirerek komple bir uygulama haline dönüştürebilirler. Şimdi son makalaemizi yazmaya başlayalım. Bu makalemizde JQuery kütüphanesinden faydalanarak Ajax ile verileri php dosyasına aktaracağız. Burada dikkat etmemiz gereken JQuery Kütüphanesini mutlaka sayfamızda çağırmamız gerekiyor, aksi taktirde veri gönderimi yapamayız.

<HTML>
<HEAD>
<TITLE>Dinamik Olarak Textbox Ekleme, Silme ve Yazma</TITLE>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var a = 0;

function Ekleme() {
    a++;
    var dinamicDiv = document.createElement("div");
    dinamicDiv.id = "div"+a;
    dinamicDiv.style.height = "40px";
    dinamicDiv.style.width = "300px";
    document.body.appendChild(dinamicDiv);     

    var element = document.createElement("input");
    element.setAttribute("type", "text");
    element.setAttribute("value", "text"+a);
    element.setAttribute("name", "text"+a);
    element.setAttribute("id", "text"+a);     

    var divId = document.getElementById("div"+a);
    divId.appendChild(element);
}

function Silme() {
    var divsil = document.getElementById("div"+a);
    document.body.removeChild(divsil);
    a--;
}

function Yazma() {
    var veriler = new Array();

    for (i=1;i<a+1;i++){
    veriler[i-1] = document.getElementById("text"+i).value;
    yazim = document.getElementById('yazimyeri');
    }
    gonderimler = veriler.join();
    yazim.innerHTML = gonderimler;
    Gonderme(gonderimler);
}

function Gonderme(verim) {
	$.ajax({
	type:'POST',
        url:"veri.php?veri="+verim,
        success: function (msg) {
        $('div#sonuc').html(msg);
       }
     });
   }
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT type="button" value="Ekleme" onclick="Ekleme()" />
<INPUT type="button" value="Silme" onclick="Silme()" />
<INPUT type="button" value="Yazma" onclick="Yazma()" />
<div id="yazimyeri"> </div>
<div id="sonuc"> </div>
</FORM>
</BODY>
</HTML>

Ekleme ve Silme fonksiyonlarında 2. makaleyle herhangi bir fark bulunmuyor. Bu yüzden Yazma fonksiyonuna geçeceğim. İsteyen arkadaşlar önceki makalelere bakabilir.

Yazma fonksiyonunda yaptığım değişiklik yazılacak verileri gonderimler değişkenine alarak fonksiyonun içinde fonksiyon çağırdım. Yani Yazma fonkiyonunun içinden Gonderme fonksiyonunu çalıştırdım. Bunu yapmayıp bir tane de Gönder butonu koyarak bu işlemi yapabilirdim fakat tekrar for döngüsü ile verileri diziye aktarıp, birleştirip ondan sonra gönderme yapmam gerekiyordu. Bu yüzden tekrar bu işlemleri yapmak yerine Yazma butonu ile hem verileri yazıp hemde veri.php dosyasına değerleri göndermiş oldum. İsterseniz bu verileri siz ayırabilirsiniz.

Gonderme fonksiyonunda url:”veri.php?veri=”+verim, kodu ile ve GET yöntemi ile verileri php ye göndermiş olduk. veri.php’den gelecek sonuç ise sonuc divine yazdırılacak. veri.php dosyasının da kodlarını verip, içeriğini anlatarak bu makalemizi tamamlamış olalalım.

<?php
// veri.php olarak kaydedin
if (isset($_GET['veri'])){
    $veri=$_GET['veri'];
    $hece_sayisi = kel_bol($veri);
    echo "$hece_sayisi hece";

function kel_bol($kelime){
$dizi = explode(",",$kelime);
    return count($dizi);}
}
?>

isset ile değerin boş olup olmadığını kontrol ediyoruz. Daha sonra kelime bölme fonksiyonuna veriyi gönderiyoruz. Bu kel_bol fonksiyonunda explode ile gelen veriyi virgüllerden bölerek kelimelere parçalıyıp, diziye aktarıyoruz. count ile kaç kelime olduğunu bulup, return ile sonucu geri gönderiyoruz. echo ile de hece sayısını yazdırıyoruz. Örneğin; 5 hece gibi. Sonuç olarak burada yazdırdığımız hece sayısı HTML sayfamızın sonuc divinde görünecek.

Makale üçlemesi yaparak işinize yarayabileceğini düşündüğüm bir uygulama çıkarmış olduk. Gelecek makalelerde tekrar görüşmek üzere.

 3.734 Okunma

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

  1. baya faydalandım. emeğine sağlık 😀

  2. güzel yazı devamını bekliyoruz

  3. sayfayı bütün kodlarıyla vermen işime çok yaradı, iyi kodlama bilmeyen olarak. diğer bloklardan daha iyi bir yol izlemişsin. bende tebrik ederim. devamını bekliyoruz yazılarının.

  4. Çok Harika, gerçekten bu site çok işime yaradı, çok teşekkürler

  5. Bastan sonra 3 makalede cok temiz ve net anlatilmis,eline saglik tesekkurler…

  6. Meraba bu makaleler iyi ama en son olarak bunları bi örnekte gösterseydin

  7. Allah razı olsun. İlk defa yorum yapma gereğini duydum. Emeğine sağlık.

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

Daha fazla JavaScript, JQuery, Php
Kapat