Greetings,
I am creating a web form which will all the user to add an unlimited number
of email addresses. Basically I have 3 buttons, "Add Another Email", "-" to
remove, and a "Save" button. When the user clicks the "Add another email" it
will call a client side JavaScript function, add_email, which will
dynamically add a new set of controls to the webpage using the innerHTML
method. It appears to work perfectly fine in the browser. The remove button
also removes the controls as expected.
The problem I am having is when the user clicks the "Save" button and the
data is posted back to the server. I can't figure out how to read the
controls that were added dynamically with the JavaScript code. I am trying
to avoid a ton of postbacks. Below is the code I am trying to get working.
Thanks in advance for your help.
Thanks!
Dennis
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Protected Sub btnSave_Click(ByVal sender As Object, ByVal e As
System.EventArgs)
For Each oControl As Control In Controls
'Stop
'This is where I am trying to read the controls that were dynamically added
to the html with the JavaScript. The added controls are not in the controls
object.
Next
End Sub
</script>
<script language="javascript">
var email_count=0;
function remove_email(emailid) {
var d = document.getElementById('emailtable');
var olddiv = document.getElementById('e' + emailid);
d.removeChild(olddiv);
}
function add_email() {
email_count++;
var html='<div id="e' + email_count + '"><table><tr><td
class="FieldLabel">Type</td>' +
'<td><select id="Select1" ><option selected>Home</option><option
selected>Business' +
'</option></select></td><td class="required" colspan="2">Required</td></tr>'
+
'<tr><td class="FieldLabel">Address</td><td><input id="txtEmailAddress"
type="text" />' +
'</td><td class="required">Required</td><td><input id="Button1"
type="button" ' +
'value="-" onclick="remove_email(' + email_count + ')" /></td></tr><tr><td
colspan="4">' +
'<hr /></td></tr></table></div>';
document.getElementById("emailtable").innerHTML += html;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Test Page</title>
</head>
<body>
<form id="form1" action="Test.aspx" runat="server">
<div id="emailtable">
</div>
<input id="btnAddEmail" type="button" value="Add Another Email"
onclick="add_email();" />
<asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click"
/>
</form>
</body>
</html>
