Dinamik Olarak Form Elemanı Ekleme, Silme ve Yazdırma – Bölüm 2

 bcakir
 8 Haziran 2011

Merhaba arkadaşlar. Uygulamamıza kaldığımız yerden devam ediyoruz. Kısaca yaptıklarımızı hatırlayacak olursak textbox ekleme ve silmeyi anlatmıştım. Bu makalede ise Div içinde textbox oluşturup, alt alta liste şeklinde görüntülenmesini ve bu textbox içinde bulunan değerleri arraye alıp birleştirerek ekrana yazmayı anlatacağım. Şimdi kod parçamızı vererek uygulamamıza başlayalım.

<HTML>
<HEAD>
<TITLE>Dinamik Olarak Textbox Ekleme, Silme ve Yazma</TITLE>
<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');
    }
    yazim.innerHTML = veriler.join();
}
</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>
</FORM>
</BODY>
</HTML>

Ekleme fonksiyonunda 1. makale ile arasında sadece bu sefer Div yaratıp onun içinde Textbox oluşturduk. Yani her Textbox için bir tanede Div oluşturduk. Ekleme fonksiyonunda kullandığım kodları 1. makalede anlatmıştım bu yüzden onları tekrar yazma gerekliliği görmüyorum. Kodlarda sıkıntısı olanlar için 1. makaleyi gözden geçirmelerini tavsiye ediyorum.

Silme fonksiyonunda ise bu sefer textbox değil divi sildim. Başka herhangi bir değişiklik bulunmuyor.

Yazma fonksiyonunu bu makalede oluşturduğum için onu detaylı anlatacağım. İlk önce veriler adında dizi (array) oluşturduk. Daha sonra for döngüsü ile bu değerleri diziye aktardım. for döngüsünde dikkat edilmesi gereken yer dizilerin 0 dan texboxların 1 den başlaması. Değer aktarmayı ona göre kurmanız gerekiyor. Daha sonra ise innerHTML kodu ile yazimyeri divinin içine join(); kodu ile dizinin içindeki değerleri birleştirerek yazdık. Ben pazantezin içine herhanbir bir ayraç koymadığım için araya virgül koyarak değerleri yazacak. Siz istedeğiniz ayracı veya boşluğu koyabilirsiniz. Örnek olarak veriler.join(‘-‘); gibi.

 3.207 Okunma

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

  1. join kullanıp bütün hepsini birleştirme fikri güzelmiş. yararlı bir yazı olmuş.

  2. Teşekkürler yazı için 🙂
    Yalnız sadece bir tane textbox eklemek yerine büyükçe bir form ekleyebilir miyiz?

    • Büyükçe bir form derken ne demek istediğini anlatabilir misin? İstediğin form elemanını appendChild ile ekleyebilirsin. Sadece setAttribute ile ekleyeceğin elemanın özelliklerini ayarlaman lazım.

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

Daha fazla JavaScript
Kapat