Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!
Dynamically add a textbox with same size and class as textbox above it
Im trying to create a comment page but would like to dynamically add a textbox with same class and size,look as the textbox above it when a button is click that says "Add comment"
Here's the html
<tr>
<td class ="style3">
<asp:Label ID="Label1" runat="server" Text="Comment:"
cssClass="pit" Width="137px"></asp:textbo
</td>
<td>
<asp:TextBox ID="TextBox7" runat="server" cssclass="hist" height="51px"
TextMode="MultiLine" Width="384px"></asp:TextBo
</td>
Here's the html
<tr>
<td class ="style3">
<asp:Label ID="Label1" runat="server" Text="Comment:"
cssClass="pit" Width="137px"></asp:textbo
</td>
<td>
<asp:TextBox ID="TextBox7" runat="server" cssclass="hist" height="51px"
TextMode="MultiLine" Width="384px"></asp:TextBo
</td>
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
try this
function addTextbox(theBoxID){
theBox = document.getElementById(th
theParent = theBox.parentNode;
newBox = theBox.CloneNode(true);
theParent.appendChild(newB
}
function addTextbox(theBoxID){
theBox = document.getElementById(th
theParent = theBox.parentNode;
newBox = theBox.CloneNode(true);
theParent.appendChild(newB
}
how would I edit the hist class to show properties as size,font,etc.
thanks.. I was trying to do it earlier but I get error when I assin gthe height property usin px..
thanks.. I was trying to do it earlier but I get error when I assin gthe height property usin px..
how would I implement that in HTML wiht a button click? Im getting an error calling the function saying its not part of the page.
did u try the function?
if u need to dup the entire row you can use:
sry for case errors...
if u need to dup the entire row you can use:
function addTextbox(theBoxID){
theBox = document.getElementById(theBoxID).parentNode.parentNode;
theParent = theBox.parentNode;
newBox = theBox.cloneNode(true);
theParent.appendChild(newBox);
}
sry for case errors...
Im getting error doing this way. How should I correct this?
<Button ID="Button2" runat="server" text="Add comment" OnClick="addtextbox('TextB
TextBox4 is the parent or the textbox i want to inherit/copy above it.
<Button ID="Button2" runat="server" text="Add comment" OnClick="addtextbox('TextB
TextBox4 is the parent or the textbox i want to inherit/copy above it.
I change OnClick to OnClientclick('TextBox4') but I get an error..
Microsoft JScript runtime error: Object does'nt support property or method
'getElementByID"
Microsoft JScript runtime error: Object does'nt support property or method
'getElementByID"
Please explain what your code does? I only want to copy the textbox4 and not go thru the other level of parentnodes.
I keep on getting this error
'
'Unable to get value of the property parentNode': object is null or undefined '
I keep on getting this error
'
'Unable to get value of the property parentNode': object is null or undefined '
My code works PERFECTLY and HERE ATTACHED is the PROOF.
i don't wanna know nothing about your ** of ASP.NET code.
You asked for a JAVASCRIPT HELP. You GET IT.
trythis.html
i don't wanna know nothing about your ** of ASP.NET code.
You asked for a JAVASCRIPT HELP. You GET IT.
trythis.html
Using code behind you can do it very easy. Just create a string of html with the textbox and append it to the place where you want the control to appear. For example you can generate the string with a span or something with the textbox all the styles etc and append it to the container.
with jquery it would be something like that:
$('#id_of_button_copytextbox_invoker').click(function(){
var elclone = $('#id_of_element_to_clone').clone();
elclone.appendTo('#id_of_element_where_clone_gets_append');
});
I've made up a sample how to append a textarea with jquery. Try it out and modify to your needs.
index.html
index.html
An asp.net control box is translated at runtime to an input control or whatever else...
Have a look at your generated html to identify which component is identified by the id u are passing to the function. Analyze it to view if it has parent node or not. It could be that u place the element in a second level from the root of body.. Butprobably there is a problem in the id string u passinthe function call... Are u passing the exactid string?
Have a look at your generated html to identify which component is identified by the id u are passing to the function. Analyze it to view if it has parent node or not. It could be that u place the element in a second level from the root of body.. Butprobably there is a problem in the id string u passinthe function call... Are u passing the exactid string?
OK, i got the solution:
The ID you assign to an asp:textbox is NOT the HTML object ID you get when the page is ran.
So the error is related to the fact that it can't reference to the object correctly.
You should look at HTML and identify the "client side" id as it will never change since the object is created in the source.
OR
you must find another way to identify the object, like assigning an id to the parent object (the TD) and duplicate that one.
OR (the clean solution):
You can use the property ClientIDMode Static (since .NET FW 4, i'd bet) on the object.
OBVIOUSLY you SHOULD change the ids of the duplicated objects each time you run the js code, otherwise you'll get unpredictable results.
You can do this adding a line:
OBVIOUSLY as above, you can't expect that an object duplicated client-side (javascript) will keep any state of the page as an ASP.NET object does.
The ID you assign to an asp:textbox is NOT the HTML object ID you get when the page is ran.
So the error is related to the fact that it can't reference to the object correctly.
You should look at HTML and identify the "client side" id as it will never change since the object is created in the source.
OR
you must find another way to identify the object, like assigning an id to the parent object (the TD) and duplicate that one.
OR (the clean solution):
You can use the property ClientIDMode Static (since .NET FW 4, i'd bet) on the object.
OBVIOUSLY you SHOULD change the ids of the duplicated objects each time you run the js code, otherwise you'll get unpredictable results.
You can do this adding a line:
function addTextbox(theBoxID){
theBox = document.getElementById(theBoxID).parentNode.parentNode;
theParent = theBox.parentNode;
newBox = theBox.cloneNode(true);
newBox.id = 'whateveridulike';
theParent.appendChild(newBox);
}
OBVIOUSLY as above, you can't expect that an object duplicated client-side (javascript) will keep any state of the page as an ASP.NET object does.
I put an Id to the td and tested it but it copied entire table again. Id like to copy on the
particular row. thanks
particular row. thanks
is it possible also that the textbox be 'clear' /no text/empty when it copies down?
Because when the textbox being copied had text, it copies down the text too which should'nt.
Because when the textbox being copied had text, it copies down the text too which should'nt.
ienaxx, in your code, how would the textbox be cleared when copied down so it won't copy the data that is in the previous textbox?
function addTextbox(theBoxID){
theBox = document.getElementById(th
theParent = theBox.parentNode;
newBox = theBox.cloneNode(true);
newBox.id = 'whateveridulike';
theParent.appendChild(newB
}
This works and adds a textbox;however it brings down the content of the copied textbox.
What is needed in the javascript to bring down with a blank contents?
theBox = document.getElementById(th
theParent = theBox.parentNode;
newBox = theBox.cloneNode(true);
newBox.id = 'whateveridulike';
theParent.appendChild(newB
}
This works and adds a textbox;however it brings down the content of the copied textbox.
What is needed in the javascript to bring down with a blank contents?
I think the javascript copies the row and if the textbox in that row has content it copies it too.
How can I clear the content of the textbox in that row???
How can I clear the content of the textbox in that row???
I think what you are asking for in your question and what you want are two different things. Use the system you are on here with EE as an example. You post a comment at the bottom of the page, your comment gets saved to a database which is sorted by the post making the most recent post at the bottom just before the comment box. The comment box gets pushed down because it comes after the dynamically generated content. And that is all you need to do. No javascript required.
If you need to think of this in tables then here is one way to think of it.
<table>
<!-- place your dynamically generated comments below using your asp ->
<% start looping through data%>
<tr>
<td><% asp code%></td>
<td><% asp code%></td>
</tr>
<%end loop%>
<!-- the row above will convert to multiple rows when your asp runs against your database->
<!-- below is a static form to input comments. It will always be at the bottom of the page pushed down by your dynamic content above ->
<form>
<tr>
<td><label for="textarea"></label></t
<td><textarea name="textarea" id="textarea" cols="45" rows="5"></textarea></td>
</tr>
</form>
</table>
If you need to think of this in tables then here is one way to think of it.
<table>
<!-- place your dynamically generated comments below using your asp ->
<% start looping through data%>
<tr>
<td><% asp code%></td>
<td><% asp code%></td>
</tr>
<%end loop%>
<!-- the row above will convert to multiple rows when your asp runs against your database->
<!-- below is a static form to input comments. It will always be at the bottom of the page pushed down by your dynamic content above ->
<form>
<tr>
<td><label for="textarea"></label></t
<td><textarea name="textarea" id="textarea" cols="45" rows="5"></textarea></td>
</tr>
</form>
</table>
hi,
$(document).ready(function
$('#addit').click(function
var html = $('table td:first').html();
var clon = '<br /><textarea class="response">add a comment...</textarea>';
$('table td:first').append(clon);
});
});
in this jquery, what is table td:first?
$(document).ready(function
$('#addit').click(function
var html = $('table td:first').html();
var clon = '<br /><textarea class="response">add a comment...</textarea>';
$('table td:first').append(clon);
});
});
in this jquery, what is table td:first?
td:first means the first td (cell). That code will simply render
<td><br /><textarea class="response">add a comment...</textarea></td>
But forget about jquery. You don't need it at least in this manner unless you are going to use it for an ajax call to update your database.
You will simply loop through your data to display comments you currently have. Then after your looping, you simply present your form to submit data to the server and update your database.
Are you able to display a page and loop through your data? What is the code for that page?
Unless I understand what you want to do is wrong, if you simply add duplicate comment box's like the comment above from @ienaxxx nothing will happen to your database and the next time the page refreshes it will go back to the same.
I think to go any further you should post a simplified version of your page so we can help you better.
<td><br /><textarea class="response">add a comment...</textarea></td>
But forget about jquery. You don't need it at least in this manner unless you are going to use it for an ajax call to update your database.
You will simply loop through your data to display comments you currently have. Then after your looping, you simply present your form to submit data to the server and update your database.
Are you able to display a page and loop through your data? What is the code for that page?
Unless I understand what you want to do is wrong, if you simply add duplicate comment box's like the comment above from @ienaxxx nothing will happen to your database and the next time the page refreshes it will go back to the same.
I think to go any further you should post a simplified version of your page so we can help you better.
<table id="table1" class="style19">
<caption>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</caption>
<tr>
<td class="style36" colspan="2">
<asp:Label ID="Label17" runat="server" Text="First Position:" Width="159px"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server" Width="377px" Style="margin-left: 0px"
CssClass="style2"></asp:Te
</td>
</tr>
<tr>
<td class="style36" colspan="2">
<asp:Label ID="Label18" runat="server" Text="Second Position:" class="style35"></asp:Labe
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" Width="377px" Style="margin-left: 0px"
CssClass="style2"></asp:Te
</td>
</tr>
<tr>
<td class="style36" nowrap="nowrap" colspan="2">
<asp:Label ID="Label19" runat="server" Text="Current Assignment:"
Width="137px"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox3" runat="server" Width="382px" Style="margin-left: 0px"
CssClass="style2"></asp:Te
</td>
</tr>
<tr>
<td class="style36" nowrap="nowrap" colspan="2">
<asp:Label ID="Label21" runat="server" Text="List of Assignments:"
Width="137px"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox4" runat="server" Width="382px" Style="margin-left: 0px"
CssClass="style2" TextMode="MultiLine" Height="98px"></asp:TextBo
</td>
</tr>
<tr>
<td class="style37">
<asp:Button ID="Button2" runat="server" Text="Add" />
</td>
<td class="style36">
<asp:Button ID="Button1" runat="server" Text="Save" />
</td>
</tr>
<tr>
<td class="style35" colspan="3">
<asp:Label ID="Label26" runat="server"></asp:Label
</td>
</tr>
</table>
<caption>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</caption>
<tr>
<td class="style36" colspan="2">
<asp:Label ID="Label17" runat="server" Text="First Position:" Width="159px"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server" Width="377px" Style="margin-left: 0px"
CssClass="style2"></asp:Te
</td>
</tr>
<tr>
<td class="style36" colspan="2">
<asp:Label ID="Label18" runat="server" Text="Second Position:" class="style35"></asp:Labe
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" Width="377px" Style="margin-left: 0px"
CssClass="style2"></asp:Te
</td>
</tr>
<tr>
<td class="style36" nowrap="nowrap" colspan="2">
<asp:Label ID="Label19" runat="server" Text="Current Assignment:"
Width="137px"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox3" runat="server" Width="382px" Style="margin-left: 0px"
CssClass="style2"></asp:Te
</td>
</tr>
<tr>
<td class="style36" nowrap="nowrap" colspan="2">
<asp:Label ID="Label21" runat="server" Text="List of Assignments:"
Width="137px"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox4" runat="server" Width="382px" Style="margin-left: 0px"
CssClass="style2" TextMode="MultiLine" Height="98px"></asp:TextBo
</td>
</tr>
<tr>
<td class="style37">
<asp:Button ID="Button2" runat="server" Text="Add" />
</td>
<td class="style36">
<asp:Button ID="Button1" runat="server" Text="Save" />
</td>
</tr>
<tr>
<td class="style35" colspan="3">
<asp:Label ID="Label26" runat="server"></asp:Label
</td>
</tr>
</table>
Let's forget about your ASP for now and just create a static page of what the end result should look like.
Is this a simplified representation of what you want to end up with? http://jsbin.com/ayakod/1/
If not, please edit the html and make it look like what you want to end up with.
If that does look ok, then you only need one form to ADD comments. Or are you also looking for a way to EDIT.
Lastly, was there a reason your table had colspan ="2"? when it did not look like it was needed? That messed your table up in a couple of places.
Is this a simplified representation of what you want to end up with? http://jsbin.com/ayakod/1/
If not, please edit the html and make it look like what you want to end up with.
If that does look ok, then you only need one form to ADD comments. Or are you also looking for a way to EDIT.
Lastly, was there a reason your table had colspan ="2"? when it did not look like it was needed? That messed your table up in a couple of places.
If you have any problems of duplicating the table instead of the row, you should modify the script and delete a ".parentNode". I assume you can make it by yourself, here.
As told, if you want to keep info through page states, you should forget js (unless you want to end up with a custom ajax saving the info) and create a custom function in C# that duplicates the textbox and whatever else.
If so (...well, after understanding you was in the wrong EE section to post the question....), have a look here:
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.textbox.aspx
Perhaps you'll find that it's possible to retrieve the properties of the controls and duplicate those by using a function.
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.webcontrol.copybaseattributes.aspx
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.webcontrol.style.aspx
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.webcontrol.applystyle.aspx
Hope this helps.
As told, if you want to keep info through page states, you should forget js (unless you want to end up with a custom ajax saving the info) and create a custom function in C# that duplicates the textbox and whatever else.
If so (...well, after understanding you was in the wrong EE section to post the question....), have a look here:
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.textbox.aspx
Perhaps you'll find that it's possible to retrieve the properties of the controls and duplicate those by using a function.
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.webcontrol.copybaseattributes.aspx
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.webcontrol.style.aspx
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.webcontrol.applystyle.aspx
Hope this helps.
Premium Content
You need an Expert Office subscription to comment.Start Free Trial