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

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

P: n/a
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>
Jan 1 '06 #1
Share this Question
Share on Google+
5 Replies


P: n/a
I am using ASP/VB.NET VS2005.

--
Thanks in advance for your help.

Dennis
"Dennis Fazekas" wrote:
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>

Jan 1 '06 #2

P: n/a
I am using ASP/VB.NET VS2005.

--
Thanks in advance for your help.

Dennis
"Dennis Fazekas" wrote:
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>

Jan 1 '06 #3

P: n/a
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.
--
Christopher A. Reed
"The oxen are slow, but the earth is patient."

"Dennis Fazekas" <df******@community.nospam> wrote in message
news:ua**************@TK2MSFTNGP11.phx.gbl...
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>

Jan 1 '06 #4

P: n/a
> 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...

Jan 1 '06 #5

P: n/a
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" wrote:
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...

Jan 1 '06 #6

This discussion thread is closed

Replies have been disabled for this discussion.