Dinamik Olarak Form Elemanı Ekleme ve Silme – Bölüm 1

 bcakir
 5 Haziran 2011

Marhaba arkadaşlar. Sizlere üçleme makale yazacağım. Makalelerimde aşağıdai konular yer alacak ve bu 3 makale de birbirinin devamı niteliğinde ilerleyecek. Merak etmenize gerk yok 3. makalede bütün kodu elde edebileceksiniz. Tek tek makaleleri gezmenize gerek kalmayacak bütün kodu elde etmek için.

  1. Dinamik olarak Textbox ekleme ve silme.
  2. Dinamik olarak Div ekleyerek Textbox’ları alt alta ekleme. Ayrıca, Textbox’daki verileri arraye alıp birleştirerek ekrana yazma.
  3. Textbox’daki verileri PHP dosyasına gönderip tekrar parçalama. İsteyen database bağlantı kodu ekleyerek, verileri database de kaydedebilir.

1. makalemize başlayalım artık. Bu makalede 2 tane JavaScrip function oluşturacağım Ekleme ve Silme adında. Ekleme butonuna basınca Textbox ekleyecek, Sile basınca eklenmiş olan textboxı son eklenenden ilk eklenene doğru silecek.

<HTML>
<HEAD>
<TITLE>Dinamik Olarak Textbox Ekleme ve Silme</TITLE>
<script type="text/javascript">
var a = 0;

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

 document.body.appendChild(element);
}

function Silme() {
 var textsil = document.getElementById("text"+a);
 document.body.removeChild(textsil);
 a--;
}
</SCRIPT>

</HEAD>
<BODY>
<FORM>
<INPUT type="button" value="Ekle" onclick="Ekleme()" />
<INPUT type="button" value="Sil" onclick="Silme()" />
</FORM>
</BODY>
</HTML>

Ekleme fonksiyonunda createElement kodu ile form elemenımızı yarattık. setAttribute kodu ile textboxın değerlerini ve idsini ayarladık. appendChild ile textboxı sayfamıza ekledik.

Silme fonksiyonunda ise document.getElementById(“text”+a) kodu ile sileceğimiz textboxın id bilgisini aldık ve removeChild ile textboxı sayfamızdan sildik.

Bu makalemizde anlatacaklarımın sonuna gelmiş bulunuyorum. 2. makale ile aynı uygulamaya kaldığımız yerden devam edeceğiz.

 1.990 Okunma

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

  1. document.body.appendChild(element); kodunda body i kullanmamıza neden gerek var?

    • body komutuyla gövdeye ekliyoruz textboxı. aksi taktirde bir div falan belirtmemiz lazım ekleme yeri olarak.

  2. güzel yazı emeğine sağlık devamınıda bekliyoruz 😀

  3. güzel yazı tebrikler

  4. Peki bu form elemanını istediğimiz div içinde nasıl oluşturabiliriz . ?

    • Bu konunun 2. makalesini incelerseniz, div içerisinde oluşturma işlemi orada yer alıyor. İsterseniz divide örnekte olduğu gibi dinamik olarak oluşturabilirsiniz.

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