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:textbox>
</td>
<td>
<asp:TextBox ID="TextBox7" runat="server" cssclass="hist" height="51px"
TextMode="MultiLine" Width="384px"></asp:TextBox>
</td>

zachvaldezAsked: 2012-12-20

Who is Participating?

Solutions

LVL 10

ienaxxxConnect With a Mentor Commented: 2013-01-08

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.

LVL 10

ienaxxxCommented: 2012-12-20

try this

function addTextbox(theBoxID){
theBox = document.getElementById(theBoxID);
theParent = theBox.parentNode;
newBox = theBox.CloneNode(true);
theParent.appendChild(newBox);
}

LVL 75

käµfm³d 👽Commented: 2012-12-20

Why hard-code the size of the box into the HTML? Why not include that in the CSS as well?

zachvaldezAuthor Commented: 2012-12-20

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

zachvaldezAuthor Commented: 2012-12-20

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.

LVL 10

ienaxxxCommented: 2012-12-20

did u try the function?

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);
}

Open in new window

sry for case errors...

zachvaldezAuthor Commented: 2012-12-20

Im getting error doing this way. How should I correct this?

<Button ID="Button2" runat="server" text="Add comment" OnClick="addtextbox('TextBox4')

TextBox4 is the parent or the textbox i want to inherit/copy above it.

zachvaldezAuthor Commented: 2012-12-20

I change OnClick to OnClientclick('TextBox4') but I get an error..
Microsoft JScript runtime error: Object does'nt support property or method
'getElementByID"

zachvaldezAuthor Commented: 2012-12-20

can someone put his thoughts on this please? thanks

zachvaldezAuthor Commented: 2012-12-20

yeah. it should be document.getElementById

zachvaldezAuthor Commented: 2012-12-20

now Im getting error Unable to get value of the property parentNode': object is null or undefined

zachvaldezAuthor Commented: 2012-12-20

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 '

zachvaldezAuthor Commented: 2012-12-20

This function does'nt work.

LVL 10

ienaxxxCommented: 2012-12-21

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

LVL 1

jinsonafCommented: 2012-12-21

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.

LVL 12

mcnuteCommented: 2012-12-21

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');
});

Open in new window

zachvaldezAuthor Commented: 2012-12-21

Im still getting an error on the parentnode,
Im using asp.net control textbox...

LVL 12

mcnuteCommented: 2012-12-21

I've made up a sample how to append a textarea with jquery. Try it out and modify to your needs.
index.html

zachvaldezAuthor Commented: 2012-12-21

that's cool.

LVL 12

mcnuteCommented: 2012-12-21

Really? If it did work out for you, please send me some points, thanks! Merry Xmas, mcnute.

LVL 10

ienaxxxCommented: 2012-12-25

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?

LVL 10

ienaxxxCommented: 2012-12-28

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:

function addTextbox(theBoxID){
theBox = document.getElementById(theBoxID).parentNode.parentNode;
theParent = theBox.parentNode;
newBox = theBox.cloneNode(true);
newBox.id = 'whateveridulike';
theParent.appendChild(newBox);
}

Open in new window

and you can use Math.random() to randomize

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.

zachvaldezAuthor Commented: 2012-12-28

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

zachvaldezAuthor Commented: 2012-12-28

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.

LVL 12

mcnuteCommented: 2012-12-28

Just clear the value like so:

$('yourclonedtextbox').val('');

Open in new window

zachvaldezAuthor Commented: 2012-12-28

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?

zachvaldezAuthor Commented: 2013-01-03

function addTextbox(theBoxID){
theBox = document.getElementById(theBoxID).parentNode.parentNode;
theParent = theBox.parentNode;
newBox = theBox.cloneNode(true);
newBox.id = 'whateveridulike';
theParent.appendChild(newBox);
}

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?

zachvaldezAuthor Commented: 2013-01-03

where will this line be added
$('yourclonedtextbox').val('');

zachvaldezAuthor Commented: 2013-01-04

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

LVL 55

Scott Fell, EE MVEDeveloper & EE ModeratorCommented: 2013-01-04

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></td>
<td><textarea name="textarea" id="textarea" cols="45" rows="5"></textarea></td>
</tr>
</form>
</table>

zachvaldezAuthor Commented: 2013-01-07

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?

zachvaldezAuthor Commented: 2013-01-07

IM using asp.net control 'TextBox4' and I can't seem know where to place textarea...

LVL 55

Scott Fell, EE MVEDeveloper & EE ModeratorCommented: 2013-01-07

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.

zachvaldezAuthor Commented: 2013-01-07

LVL 55

Scott Fell, EE MVEDeveloper & EE ModeratorCommented: 2013-01-07

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/edit

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.