Saturday, September 20, 2014

Adding Textbox Dynamically Using JavaScript in Asp.Net

Adding Textboxes Dynamically using Javascript is very easy in Asp.Net

In .aspx page

Add following javascript in Head Section of your page 

 function GetDynamicTextBox() 
            return 'TextBox1:<input name = "txt1" style="width:200px" type="text" />'+
            'TextBox2:<input name = "txt2" type="text" style="width:200px" />' +
            '<input type="button" value="Remove"  class="button"  onclick = "RemoveTextBox(this)" />'

The above script creates html part which you want generate dynamically on button click.
The above Html creates two Textboxes with Remove button.

function AddTextBox()
            var div = document.createElement('DIV');
            div.innerHTML = GetDynamicTextBox();

The above script is for adding HTML code in a div tag which is in our page and this function will be called using Button.

 function RemoveTextBox(div)

The above function is used for Removing textbox during runtime on page.And this function will be called in dynamically generated html Code as seen in  GetDynamicTextBox() function.

In Body Section:

    <form id="form1" runat="server">
        <div><input id="btnAdd" type="button" value="Add Manager" class="button"                     onclick="AddTextBox()" />
      <div id="TextBoxContainer">
                <!--Textboxes will be added here -->

After compile and execute following result will be show


Now you will imagine "How To Retrive Values From these Textboxes" ( ClickHere to see)

No comments:

Post a Comment