Download the sample from here
http://www.aspsnippets.com/Articles/Create-dynamic-textbox-using-JavaScript-in-ASP.Net.aspx
and Refer this article:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CS.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
var isShift = false;
var seperator = "/";
function DateFormat(txt, keyCode) {
if (keyCode == 16)
isShift = true;
//Validate that its Numeric
if (((keyCode >= 48 && keyCode <= 57) || keyCode == 8 ||
keyCode <= 37 || keyCode <= 39 ||
(keyCode >= 96 && keyCode <= 105)) && isShift == false) {
if ((txt.value.length == 2 || txt.value.length == 5) && keyCode != 8) {
txt.value += seperator;
}
return true;
}
else {
return false;
}
}
function ValidateDate(txt, keyCode) {
if (keyCode == 16)
isShift = false;
var val = txt.value;
var lblmesg = document.getElementById("<%=lblMesg.ClientID%>");
if (val.length == 10) {
var splits = val.split("/");
var dt = new Date(splits[1] + "/" + splits[0] + "/" + splits[2]);
//Validation for Dates
if (dt.getDate() == splits[0] && dt.getMonth() + 1 == splits[1]
&& dt.getFullYear() == splits[2]) {
lblmesg.style.color = "green";
lblmesg.innerHTML = "Valid Date";
}
else {
lblmesg.style.color = "red";
lblmesg.innerHTML = "Invalid Date";
return;
}
//Range Validation
if (txt.id.indexOf("txtRange") != -1)
RangeValidation(dt);
//BirthDate Validation
if (txt.id.indexOf("txtBirthDate") != -1)
BirthDateValidation(dt)
}
else if (val.length < 10) {
lblmesg.style.color = "blue";
lblmesg.innerHTML =
"Required dd/mm/yy format. Slashes will come up automatically.";
}
}
function GetDynamicTextBox(value){
return '<input name = "DynamicTextBox" type="text" value = "' + value + '" onkeyup = "ValidateDate(this, event.keyCode)" onkeydown = "return DateFormat(this, event.keyCode)" />' +
'<input type="button" value="Remove" onclick = "RemoveTextBox(this)" />'
}
function AddTextBox() {
var div = document.createElement('DIV');
div.innerHTML = GetDynamicTextBox("");
document.getElementById("TextBoxContainer").appendChild(div);
}
function RemoveTextBox(div) {
document.getElementById("TextBoxContainer").removeChild(div.parentNode);
}
function RecreateDynamicTextboxes() {
var values = eval('<%=Values%>');
if (values != null) {
var html = "";
for (var i = 0; i < values.length; i++) {
html += "<div>" + GetDynamicTextBox(values[i]) + "</div>";
}
document.getElementById("TextBoxContainer").innerHTML = html;
}
}
window.onload = RecreateDynamicTextboxes;
</script>
</head>
<body>
<form id="form1" runat="server">
<input id="btnAdd" type="button" value="add" onclick="AddTextBox()" />
<br />
<br />
<div id="TextBoxContainer">
<!--Textboxes will be added here -->
</div>
<br />
<asp:Button ID="btnPost" runat="server" Text="Post" OnClick="Post" />
<asp:Label ID="lblMesg" Text="" runat="server" />
</form>
</body>
</html>
Thank You
