This example demonstrates how to create dynamically input textboxes with jquery. In jquery, it is easy to add textboxes dynamically. I have used appent method to add input text box in div. Let’s see the example.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
html, body
{
font-family: "Helvetica Neue" , Arial, Helvetica;
font-size: 12px;
}
label
{
padding: 2px 10px;
}
input{border:1px solid #eaeaea; background-color:#fcfcfc;padding:4px 5px;}
input:focus{background-color:#fceeaa;}
</style>
<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var dyDiv = $("#dyntb");
for (var i = 0; i < 10; i++) {
dyDiv.append("<p>Textbox "+i+"<label><input type='text' name='tbbox[]' value='textbox " + i + "'<label></p>");
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="dyntb">
</div>
</form>
</body>
</html>
Output
Download
Dynamic textbox.zip (1.15 kb)
See live demo