Need help reading controls added dynamically using JavaScript (innerHTML) in asp.net

D

Dennis Fazekas

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>
 
C

Christopher Reed

By dynamically adding the "control" on the client-side, you have no
server-side functionality built in. As I see it, you're only option appears
to be processing through the Page_Load using Request.Form information as you
would with a classic ASP application.

Another option would be using the callback features in ASP.NET 2.0. I
haven't tried these yet, so I really don't have a frame of reference with
doing callbacks at this time.
 
P

Paul Henderson

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.

The new controls won't be added to the ASP Controls collection as when
posting back, ASP basically only sends the values of controls on the
form; it has no way of adding new server-side control objects based on
what has been done to the DOM on the client side.

In this case, the easiest solution might be to assign a name="something
unique" to the dynamically created controls, where "something unique"
is an identifier you can predict (e.g. "email1", "email2", ...). Then,
in the server code, rather than checking through the Controls
collection, try retrieving Request["email" + n] where you start with n
= 1 and stop when it returns null / string.Empty. The values in the
request will then be the specified email address. You might have to be
careful if the user can remove addresses, as that could mean
Request["email3"] is defined but not email2; I'm sure you can figure
out some way around that, though...
 
G

Guest

Thanks for your help. You idea worked.

Here's an update to the code in case anyone else is trying to do something
similar.

Happy Year!

<%@ 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)
Dim id As Integer = 1
Do While Not Request("Email" + id.ToString()) Is Nothing
Response.Write("Type: " & Request("Type" & id.ToString) & " - "
& Request("Email" & id.ToString) & "<br>")
id += 1
Loop
End Sub
</script>

<script language="javascript">
var email_inc=0;

function remove_email(emailid) {
var d = document.getElementById('emailtable');
var olddiv = document.getElementById('e' + emailid);
d.removeChild(olddiv);
}

function add_email() {
email_inc++;
var html='<div id="e' + email_inc + '"><table><tr><td
class="FieldLabel">Type</td>' +
'<td><select name="Type' + email_inc + '" 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 name="Email'
+ email_inc + '" type="text" />' +
'</td><td class="required">Required</td><td><input id="Button1"
type="button" ' +
'value="-" onclick="remove_email(' + email_inc + ')"
/></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>
<%@ 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)
Dim id As Integer = 1
Do While Not Request("Email" + id.ToString()) Is Nothing
Response.Write("Type: " & Request("Type" & id.ToString) & " - "
& Request("Email" & id.ToString) & "<br>")
id += 1
Loop
End Sub
</script>

<script language="javascript">
var email_inc=0;

function remove_email(emailid) {
var d = document.getElementById('emailtable');
var olddiv = document.getElementById('e' + emailid);
d.removeChild(olddiv);
}

function add_email() {
email_inc++;
var html='<div id="e' + email_inc + '"><table><tr><td
class="FieldLabel">Type</td>' +
'<td><select name="Type' + email_inc + '" 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 name="Email'
+ email_inc + '" type="text" />' +
'</td><td class="required">Required</td><td><input id="Button1"
type="button" ' +
'value="-" onclick="remove_email(' + email_inc + ')"
/></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>


--
Thanks in advance for your help.

Dennis


Paul Henderson said:
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.

The new controls won't be added to the ASP Controls collection as when
posting back, ASP basically only sends the values of controls on the
form; it has no way of adding new server-side control objects based on
what has been done to the DOM on the client side.

In this case, the easiest solution might be to assign a name="something
unique" to the dynamically created controls, where "something unique"
is an identifier you can predict (e.g. "email1", "email2", ...). Then,
in the server code, rather than checking through the Controls
collection, try retrieving Request["email" + n] where you start with n
= 1 and stop when it returns null / string.Empty. The values in the
request will then be the specified email address. You might have to be
careful if the user can remove addresses, as that could mean
Request["email3"] is defined but not email2; I'm sure you can figure
out some way around that, though...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,731
Messages
2,569,432
Members
44,835
Latest member
KetoRushACVBuy

Latest Threads

Top