Hi,
Here I have coded for creating the textbox
dynamically using JQuery for Asp.net applications. Also you can find the Jquery
message box(modal dialog) for getting
the number of details to be added. Also you can find how to remove the
dynamically created textboxes. Am appending
three textboxes as a Single record as you can find the animation below.
ASP.NET CODE AND SCRIPTING
<html>
<head runat="server">
<title>Copyright
@ Fourthbottle</title>
<script src="Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui1.10.3.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.js" type="text/javascript"></script>
<link href="Scripts/jquery-ui.css" rel="stylesheet"
type="text/css"/>
<script type="text/javascript">
function
Show() {
$("#dialog:ui-dialog").dialog("destroy");
var
titl = "Create textbox using JQuery";
document.getElementById('dialog-modal').title = titl;
$("#dialog-modal").dialog({
height: 150,
width: 450,
modal: true
});
return
false;
}
function
CloseDailog() {
$('#dialog-modal').dialog('close');
return
false;
}
function
Okclick() {
var
counter = document.getElementById("<%=NumOfsubj.ClientID %>").value;
CloseDailog();
for
(var i = 1; i <= counter; i++) {
$('<div/>',
{ 'id': 'TextBoxesGroup'
}).html(
$('<label/>').html()
)
.append($('<input
type="text" runat="server" class="c1"
placeholder="Enter Subject Code" >').attr({ 'id': 'SubjectCode'
+ i, 'name': 'Subcode'
+ i }))
.append($('<input
type="text" runat="server" class="c1"
placeholder="Enter Subject Name" >').attr({ 'id': 'SubjName'
+ i, 'name': 'Subname'
+ i }))
.append($('<input
type="text" runat="server" class="c1" placeholder="Enter
Staff Name" >').attr({ 'id': 'StaffName' + i, 'name':
'Staff' + i }))
.appendTo('#TextBoxesGroup')
$('.c2').css("display", "inline");
}
return
false;
}
function
Removerow() {
var counter = document.getElementById("<%=NumOfsubj.ClientID
%>").value;
$("#SubjectCode"
+ counter).remove();
$("#SubjName"
+ counter).remove();
$("#StaffName"
+ counter).remove();
counter = counter - 1;
document.getElementById("<%=NumOfsubj.ClientID
%>").value
= counter;
return
false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btnAdd" OnClientClick="javascript:return Show();" runat="server" Text="Add New Exams" />
<div id='TextBoxesGroup' style="text-align: center">
</div>
<div style="text-align: center">
<asp:Button ID="btnRemoveRow" runat="server" Style="display: none" OnClientClick="javascript:return Removerow();" class="c2" Text="Remove row" />
<asp:Button ID="Button1" runat="server" Text="Cancel" Style="display: none" class="c2" />
</div>
<div id="dialog-modal" style="display: none">Enter the number of records to
Add
<asp:TextBox ID="NumOfsubj" runat="server" Style="width: 50px;"></asp:TextBox><br />
<div style="text-align: center">
<asp:Button ID="btnOk" runat="server" Text="Okay" OnClientClick="javascript:return Okclick();" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClientClick="javascript:return CloseDailog();" />
</div>
</div>
<asp:HiddenField ID="hdnvalue" runat="server" />
</div>
</form>
</body>
</html>
