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();
document.getElementById("TextBoxContainer").appendChild(div);
}
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)
{
document.getElementById("TextBoxContainer").removeChild(div.parentNode);
}
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:
<body>
<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 -->
</div>
</div>
</form>
</body>
After compile and execute following result will be show
OutPut:
Now you will imagine "How To Retrive Values From these Textboxes" ( ClickHere to see)
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();
document.getElementById("TextBoxContainer").appendChild(div);
}
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)
{
document.getElementById("TextBoxContainer").removeChild(div.parentNode);
}
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:
<body>
<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 -->
</div>
</div>
</form>
</body>
After compile and execute following result will be show
OutPut:
Now you will imagine "How To Retrive Values From these Textboxes" ( ClickHere to see)
No comments:
Post a Comment