Hi! I have a label (Email1) and a textbox (txtEmail1) and I would like to add a button bellow that says Add Email, then have it add another label and textbox for email2 and so on. Maybe using javascript? Thanks for the help!
You will find 100s of samples but here is one (borrowed and modified ) You may need a div for the label
function addTexbox(_form) {
for (i=0;i<n;i++) {
newBox=document.createElement('input');
newBox.id='added_'+i;
// and modify/add any other properties you wish here
_form.appendChild(newBox);
}
call this using
<form onsubmit="return false">
<input type="button" value="Click To Add"
onclick="addTextboxe(this.form)">
</form>
HTH
Thajeer
"Dont forget to click "Mark as Answer" on the post that helped you. This marks your thread as Resolved and the community will know you have been helped."
Marked as answer by James25 on Feb 14, 2008 12:18 AM
Protected Sub btnAddEmail_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnAddEmail.Click
Dim tr As New TableRow
Dim tcLabel As New TableCell
Dim tcTextBox As New TableCell
Dim newLabel As New Label
Dim newTextBox As New TextBox
Dim i As Integer = Table1.Rows.Count + 1
newLabel.ID = "Email" + Convert.ToString(i)
newLabel.Text = "Email" + Convert.ToString(i)
newTextBox.ID = "txtEmail" + Convert.ToString(i)
tcLabel.Controls.Add(newLabel)
tcTextBox.Controls.Add(newTextBox)
tr.Cells.Add(tcLabel)
tr.Cells.Add(tcTextBox)
Table1.Rows.Add(tr)
End Sub
Let me know how it works !
Don't forget to click "Mark as Answer" on the post that helped you.
Marked as answer by James25 on Feb 19, 2008 03:35 PM
Every asp:TextBox will be converted into HTML text after page loaded. So it's not available for adding a asp:TextBox by JavaScript. But you can add HTML Text to implement the function of asp:TextBox as ASP.NET do.
thajeer
You will find 100s of samples but here is one (borrowed and modified ) You may need a div for the label
function addTexbox(_form) {
for (i=0;i<n;i++) {
newBox=document.createElement('input');
newBox.id='added_'+i;
// and modify/add any other properties you wish here
_form.appendChild(newBox);
}
call this using
<form onsubmit="return false">
<input type="button" value="Click To Add"
onclick="addTextboxe(this.form)">
</form>
Please add a hidden control into page to get the value of Text in code behind.
For example, to get the HTML added_0 Text control,you should use the codes as below.
In your scenario, added_0 is created by JavaScript and you can also use this approach to get the value of it. You can get the every Text value once time into hidden control by using JavaScript, and use string.split to split this string from hidden control
to distinguish the string in different Text control. Or you can add hidden control with adding HTML Text control, and one hidden for one Text. When click the button, you can distribute the value from every Text control into the every corresponding hidden control. It's
conveniently getting the value like using TextBox.
This is just the way for achieveing via JavaScript. Hope it helps.
If you have any feedback about my replies, please contact msdnmg@microsoft.com
James25
Member
644 Points
1341 Posts
How to add a textbox programmatically
Feb 13, 2008 10:50 PM|LINK
Hi! I have a label (Email1) and a textbox (txtEmail1) and I would like to add a button bellow that says Add Email, then have it add another label and textbox for email2 and so on. Maybe using javascript? Thanks for the help!
thajeer
Participant
1538 Points
263 Posts
Re: How to add a textbox programmatically
Feb 14, 2008 12:14 AM|LINK
You will find 100s of samples but here is one (borrowed and modified ) You may need a div for the label
function addTexbox(_form) {
for (i=0;i<n;i++) {
newBox=document.createElement('input');
newBox.id='added_'+i;
// and modify/add any other properties you wish here
_form.appendChild(newBox);
}
call this using
<form onsubmit="return false">
<input type="button" value="Click To Add"
onclick="addTextboxe(this.form)">
</form>
Thajeer
"Dont forget to click "Mark as Answer" on the post that helped you. This marks your thread as Resolved and the community will know you have been helped."
James25
Member
644 Points
1341 Posts
Re: How to add a textbox programmatically
Feb 14, 2008 12:17 AM|LINK
Thank you for the reply! Can input be changed to asp:TextBox?
TonyDong
Contributor
4777 Points
939 Posts
Re: How to add a textbox programmatically
Feb 14, 2008 12:18 AM|LINK
May be you can use usercontrol, each time, you add one new usercontrol
See this url for load usercontrol dynamically
http://msdn2.microsoft.com/en-us/library/c0az2h86(VS.80).aspx
amensi
Contributor
2381 Points
421 Posts
Re: How to add a textbox programmatically
Feb 14, 2008 12:22 AM|LINK
Here is a dynamic snippet:
HTML:
<form id="form1" runat="server"> <div> <asp:Button runat="server" Text="Add Email" ID="btnAddEmail" onclick="btnAddEmail_Click" /> <asp:Table ID="Table1" runat="server"> <asp:TableRow> <asp:TableCell> <asp:Label ID="Email1" runat="server" Text="Email1"></asp:Label></asp:TableCell> <asp:TableCell> <asp:TextBox ID="txtEmail1" runat="server"></asp:TextBox></asp:TableCell> </asp:TableRow> </asp:Table> </div> </form>VB CODE:
Let me know how it works !Don't forget to click "Mark as Answer" on the post that helped you.
Vince Xu - M...
All-Star
80367 Points
6801 Posts
Re: How to add a textbox programmatically
Feb 15, 2008 03:31 AM|LINK
Hi,
Every asp:TextBox will be converted into HTML text after page loaded. So it's not available for adding a asp:TextBox by JavaScript. But you can add HTML Text to implement the function of asp:TextBox as ASP.NET do.
Please add a hidden control into page to get the value of Text in code behind.
For example, to get the HTML added_0 Text control,you should use the codes as below.
HTML:
<script type="text/javascript"> function GetVlue() { document.getElementById("Hidden1").value=document.getElementById("added_0").value; } </script> <body> <form id="form1" runat="server"> <asp:Button ID="Button1" runat="server" OnClientClick="GetVlue()" Text="Button" onclick="Button1_Click" /> <input id="Hidden1" type="hidden" runat="server" /> <input id="added_0" type="text" /> </form> </body>Code Behind:
In your scenario, added_0 is created by JavaScript and you can also use this approach to get the value of it. You can get the every Text value once time into hidden control by using JavaScript, and use string.split to split this string from hidden control to distinguish the string in different Text control. Or you can add hidden control with adding HTML Text control, and one hidden for one Text. When click the button, you can distribute the value from every Text control into the every corresponding hidden control. It's conveniently getting the value like using TextBox.
This is just the way for achieveing via JavaScript. Hope it helps.