CODEWITHSUNDEEP
javascriptjquery
Suleman khan
Suleman khan

Reputation: 1068

how can i get two textboxes dynamically?

I would like to have two textbox whenever i click on addtextboxes button, I am using this code to generate single textbox and it works fine.

<script type="text/javascript">
$(document).ready(function () {
    var counter = 1;

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

        var newTextBoxDiv = $(document.createElement('div'))
            .attr("id", 'TextBoxDiv' + counter);

        newTextBoxDiv.after().html('<label>answer_' + counter + ' : </label>' + '<input type="text" name="answer_' + counter + '" id="answer_' + counter + '"  value="" >');
        newTextBoxDiv.appendTo("#TextBoxesGroup");
        counter++;
    });

});
</script>

<div id='TextBoxesGroup'>
    <div id="TextBoxDiv1">
        <label>answer #1 : </label><input type='textbox' id='answer1' >
    </div>
</div>

here i would like to know how can i have two textboxes when i click on addbutton ? any help would be appreciated.

Upvotes: 0

Views: 351

Answers (5)

Venkata Krishna
Venkata Krishna

Reputation: 15112

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

    var counter = 1;
    for (var i=0;i <= counter;i++)
    {
        var newTextBoxDiv = $(document.createElement('div'))
                   .attr("id", 'TextBoxDiv' + i);
        newTextBoxDiv.after().html('<label>answer_'+ i + ' : </label>' + '<input type="text" name="answer_' + i + '" id="answer_' + i + '"  value="" >'  );
        newTextBoxDiv.appendTo("#TextBoxesGroup");
    }
});

If you want more textboxes. increase you counter value.

Upvotes: 1

Chase
Chase

Reputation: 29549

By taking the inner workings of your click event and putting it into it's own function, you can do something like the following:

HTML

<button id="addButton">Add</button>
<div id='TextBoxesGroup'></div>

JavaScript

var counter = 1;
var labelArray = ["answer", "order"];

$("#addButton").click(function () {
    for(var i = 0; i < labelArray.length; i++){
        createNewInput(labelArray[i]);
    }
    counter++;
});

function createNewInput(label){
    var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
    newTextBoxDiv.after().html('<label>'+ label + " " + counter + ' : </label>' + '<input type="text" name="answer_' + counter + '" id="answer_' + counter + '"  value="" >'  );
    newTextBoxDiv.appendTo("#TextBoxesGroup");    
}

EXAMPLE

Upvotes: 0

Farhan
Farhan

Reputation: 752

Try this:

  $(document).ready(function(){
     var counter = 1;
       $("#addButton").click(function () {
          var clone1 = $("#TextBoxDiv1").clone();
          clone1.children('input').attr('id',"answer_"+counter)  ;
          clone1.children('input').attr('name',"answer_"+counter);
           $("#TextBoxesGroup").append(clone1);
          counter++;
          var clone2 = $("#TextBoxDiv1").clone();
          clone2.children('input').attr('id',"answer_"+counter)  ;
          clone2.children('input').attr('name',"answer_"+counter);
          $("#TextBoxesGroup").append(clone2);
     });
  });

Upvotes: 0

Rituraj ratan
Rituraj ratan

Reputation: 10378

$(document).ready(function () {
    var counter = 1;

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

        var newTextBoxDiv = $(document.createElement('div'))
            .attr("id", 'TextBoxDiv' + counter);

        var $html = '<label>answer_' + counter + ' : </label>' + '<input type="text" name="answer_' + counter + '" id="answer_' + counter + '"  value="" >';
        counter++;
        $html += '<label>answer_' + counter + ' : </label>' + '<input type="text" name="answer_' + counter + '" id="answer_' + counter + '"  value="" >';
        counter++;
        newTextBoxDiv.after().html($html);
        newTextBoxDiv.appendTo("#TextBoxesGroup");

    });

});

Upvotes: 0

Suresh Atta
Suresh Atta

Reputation: 121998

Use a for loop for two times and move your code inside the loop.

for (var i=0 ;i<=counter ;i++){


var newTextBoxDiv = $(document.createElement('div'))
                       .attr("id", 'TextBoxDiv' + i);

                        newTextBoxDiv.after().html('<label>answer_'+ i+ ' : </label>' + '<input type="text" name="answer_' + counter + '" id="answer_' + i+ '"  value="" >'  );
                        newTextBoxDiv.appendTo("#TextBoxesGroup");

                  });



}

Upvotes: 1

Related Questions