By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,002 Members | 2,157 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,002 IT Pros & Developers. It's quick & easy.

how to send data to the server from dynamically created html controls

P: 7
Hii,

currently i am working on an apliction(ASP.NET/C#) that creates dynamic html rows which contain six html text boxes and a html dropdowllist. At the time of page load the web page contain six server side text boxes and a serverside drop down list. and a html "Addrow" buton which create client side textboxes and dropdown list dynamichally Now i am meeting a problem of passing values from dynamichally created html controls to Server Side
Very Urgent
please help me
code follows

[HTML]<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" language="javascript">


var ar=new Array();
var ar2=new Array();
var len;
function LoadDdl()
{
debugger;
if(document.getElementById('Select1')!=null)
{
len=document.getElementById('Select1').options.len gth;

for(i=0;i<len;i++)
{

ar[i]=document.getElementById('Select1').options[i].innerHTML;
ar2[i]=document.getElementById('Select1').options[i].value;
}
}
}

function addRow()
{
var ni = document.getElementById('trContent');
var numi = document.getElementById('theValue');
var num = (document.getElementById('theValue').value -1)+ 2;
numi.value = num;
//add a row to the rows collection and get a reference to the newly added row
var newRow = document.all("tblGrid").insertRow();

//add 7 cells (<td>) to the new row and set the innerHTML to contain text boxes

var oCell = newRow.insertCell();
oCell.innerHTML = "<input type='text' id="+"slno"+num+" name='t1' style='width: 72px'>";


oCell = newRow.insertCell();
//oCell.innerHTML = "<input type='text' name='t2' style='width: 72px'>";
//oCell.innerHTML = "<select id='ddl' name='t2' style='width: 72px'>";
var selecttg="<select id="+"ddl"+num+"' style='width:72px'>";
var optiontg="";
for(i=0;i<len;i++)
{

//var sel=document.getElementById('ddl');
var optiontg =optiontg+"<option value="+ar2[i].toString()+">"+ar[i].toString()+"</option>";

}
var fullbotle=selecttg+optiontg;
oCell.innerHTML=fullbotle+"</select>";
//oCell.innerHTML="</select>";
oCell = newRow.insertCell();
oCell.innerHTML = "<input type='text' id="+"number"+num+" name='t3' style='width: 72px'>" ;
oCell = newRow.insertCell();
oCell.innerHTML = "<input type='text' id="+"qty"+num+" name='t4' style='width: 72px'>";

oCell = newRow.insertCell();
oCell.innerHTML = "<input type='text' id="+"rate"+num+" name='t5' style='width: 72px'>";

oCell = newRow.insertCell();
oCell.innerHTML = "<input type='text' id="+"discount"+num+" name='t6' style='width: 72px'>";
oCell = newRow.insertCell();
oCell.innerHTML = "<input type='text' id="+"Amount"+num+" name='t7' style='width: 72px'>";
oCell = newRow.insertCell();
oCell.innerHTML = "<input type='button' value='Delete' onclick='removeRow(this);'/>";
}

//deletes the specified row from the table
function removeRow(src)
{
/* src refers to the input button that was clicked.
to get a reference to the containing <tr> element,
get the parent of the parent (in this case case <tr>)
*/
var oRow = src.parentElement.parentElement;

//once the row reference is obtained, delete it passing in its rowIndex
document.all("tblGrid").deleteRow(oRow.rowIndex);
}
</script>
</head>
<body onmouseover="LoadDdl()">
<input type="hidden" value="0" id="theValue" />
<form id="form1" runat="server">
<div>
<table id="tblGrid" style="table-layout:fixed" runat="server">
<tr>
<td >
SLNo</td>
<td >
Item</td>
<td >
Number</td>
<td >
Quantity</td>
<td >
Rate</td>
<td >
Discount</td>
<td>
Amount</td>
</tr>
<tr id="trContent">
<td >
<input id="Text1" type="text" runat="server" style="width: 84px" /></td>
<td >
<select id="Select1" runat="server" style="width: 102px"></select></td>
<td >
<input id="Text3" type="text" runat="server" style="width: 72px" /></td>
<td >
<input id="Text4" type="text" runat="server" style="width: 66px" /></td>
<td >
<input id="Text5" type="text" runat="server" style="width: 66px" /></td>
<td >
<input id="Text6" type="text" runat="server" style="width: 66px" /></td>
<td>
<input id="Text7" type="text" runat="server" style="width: 72px" /></td> <td ><input type="button" value="Delete" onclick="removeRow(this);" /></td>
</tr>

</table>
<hr/>
<input type="button" value="Add Row" onclick="addRow();" />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Save" /></div>
</form>
</body>
</html>
[/HTML]
Thanking you and regards
Balu
Apr 2 '08 #1
Share this Question
Share on Google+
3 Replies


acoder
Expert Mod 15k+
P: 16,027
As long as you've named your elements and appended them within the form, the values should be submitted when you submit the form.
Apr 2 '08 #2

P: 7
can u pls give an example using dynamic contol
Apr 2 '08 #3

acoder
Expert Mod 15k+
P: 16,027
Does none of the data from the dynamically created elements get sent when the form is submitted or only some of the data?
Apr 3 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.