Dinamik bir biçimde formlarımıza yeni input satırları ya da listelerimize yeni satırlar ekleyebilir, silebiliriz. Bunun için kullanmamız gereken teknoloji şüphesiz javascripttir. Javascript kullanarak bu tarz dinamik bir uygulamayı kolayca yapabiliriz. Javascripti daha kolay bir şekilde kullanmamıza yardımcı olacak teknoloji benim neredeyse her uygulamamda kullandığım jquery’dir. Hemen jquery kullanarak form içine sınırsız input ekleyip silebileceğimiz bir uygulama yapalım. Bu uygulamayı input eklemek için değil satırları çoğaltıp silmek içinde kullanabilirsiniz. Kullanım alanı tamamen sizin hayal gücünüze ve ihtiyaçlarınıza göre şekillenebilir.

İlk etapta javascript kodumuzu yazalım.

[javascript]
$(window).load(function(){

$(function() {

var scntDiv = $(‘#listValue’);
var i = $(‘#listValue’).size() + 1;

$(document).on(‘click’,’#addItem’, function() {
$(‘<span><input name="inputName[]" type="text" /> <a id="delItem" href="#">Sil</a><br /></span>’).appendTo(scntDiv);
i++;
return false;
});

$(document).on(‘click’,’#delItem’, function() {
if( i > 2 ) {
$(this).parents(‘span’).remove();
i–;
}
return false;
});

});

});
[/javascript]

Ardından işlemin yapılacağı html kodumuzu yazalım ve jquery kütüphanesini ekleyerek uygulamamızı tamamlayalım.

[html]
<ul class="addDelList">
<li id="listValue">
<input name="inputName[]" type="text">
<a href="#" id="addItem">Ekle</a><br />
</li>
</ul>
[/html]

Github Gist Linki

DEMO

See the Pen Jquery ile yeni satır eklemek ve silmek by Tahsin Gungordu (@bymega) on CodePen.