In my previous example, I have demonstrate how to dynamically creating input textboxes with jQuery in asp.net. Now, In this example I will tell you how to retrieve dynamic input text boxes value with jQuery in asp.net. I have used serializeArray to encode the form elements as an array of names and values. In the below code, serialize the input type textboxes and pass to each loop to iterate and get name and value of each textbox.
Here’s an example
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Dynamic textbox.aspx.cs"
Inherits="Dynamic_textbox" %>
<!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>
<style>
html, body
{
font-family: "Helvetica Neue" , Arial, Helvetica;
font-size: 12px;
}
b
{
padding: 0 2px 0 10px;
}
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>");
}
$("#Button1").click(function () {
var txt = "";
$.each($('input[name^=tbbox]').serializeArray(), function (i, tbbox) {
txt += "<p>" + i + ') <b>Name:</b> ' + tbbox.value + ' <b>value:</b> ' + tbbox.value + "</p>";
});
$("#msg").html(txt);
});
});
</script>
</head>
<body>
<h1></h1>
<form id="form1" runat="server">
<div id="dyntb">
</div>
<div id="msg">
</div>
<input id="Button1" type="button" value="Submit" />
</form>
</body>
</html>
Output
Download
Dynamic_textbox_jquery.zip (1.27 kb)
See live demo