jQuery ile dinamik text kutusu eklemek

jQuery kullanarak dinamik text kutuları ekletebiliriz. Ekleme ve silme butonları ile yeni text kutuları ekleyebilir ve eklediğimiz text kutularını silebiliriz. Kodların üstüne gerekli açıklamalar eklendi. Üstelik her text kutusuna farklı ID verebilir hatta isterseniz her text kutusuna farklı isim verebilirsiniz.



jQuery ekle/sil text kutu [input]

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script></pre>

<h1>jQuery ekle/sil text kutu [input]</h1>

&nbsp;

<pre><script type="text/javascript">// <![CDATA[
$(document).ready(function(){

    var counter = 2;

    $("#addButton").click(function () {
    <!-- en fazla kaç tane text kutusu oluşturulabilir -->
    if(counter>10){
            alert("En fazla 10 tane");
            return false;
    }

    var newTextBoxDiv = $(document.createElement('div'))
         .attr("id", 'TextBoxDiv' + counter);
    <!-- text kutusunun eklendigi HTML kodları -->
    newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
          '<input type="text" name="textbox' + counter +           '" id="textbox' + counter + '" value="" >');

    newTextBoxDiv.appendTo("#TextBoxesGroup");

    counter++;
     });

     $("#removeButton").click(function () {
    if(counter==1){
          alert("No more textbox to remove");
          return false;
       }

    counter--;

        $("#TextBoxDiv" + counter).remove();

     });

     $("#getButtonValue").click(function () {

    var msg = '';
    for(i=1; i<counter; i++){          msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();  }         alert(msg);      });   });
// ]]></script></pre>
<div id="TextBoxesGroup">
<div id="TextBoxDiv1"><label>Textbox #1 : </label><input id="textbox1" type="textbox" /></div>
</div>
<pre><input id="addButton" type="button" value="Ekle" />
<input id="removeButton" type="button" value="Sil" />
<input id="getButtonValue" type="button" value="Text kutulari goster" />