How to add textboxes dynamically on a asp.net webform using javascript

Question

I want to add textboxes dynamically to a web form on the click of a button. The number will be provided in a textbox. For better understanding an image is given below: Dynamic TextBoxes

I want to create textboxes in the exact form shown in the image — Prasanta Biswas
– Prasanta Biswas, Commented May 1, 2016 at 6:44

Shalini · Accepted Answer · 2016-05-01 06:20:41Z

3

you need to use append() method to add new elements dynamically to DOM. I have created a demo for better understanding here : https://jsfiddle.net/p2hr1a1f/

HTML

<input type="text" class="noTxt">
<button class="btnCreate">
Create
</button>

<div class="txtBox-container">

</div>

jQuery

$(document).ready(function(){
    $('.btnCreate').on('click', function(){
    var txtBox="<input type='text' class='newtxtBox'><br>";
    l=$('.noTxt').val();
    console.log(l);
    for(var i=1;i<=l;i++){
        $('.txtBox-container').append(txtBox);
      console.log(txtBox);
    }
  });
});

answered May 1, 2016 at 6:20

Shalini

1631 gold badge1 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Prasanta Biswas Over a year ago

this is not the thing I want...the textboxes will be added one after anoher horizontally for a fixed width and the row is full it will move to the next row.

Collectives™ on Stack Overflow

How to add textboxes dynamically on a asp.net webform using javascript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related