Dynamically add a textbox with same size and class as textbox above it

try this

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

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

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

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:

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

Select all Open in new window

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('TextBox4')

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"

can someone put his thoughts on this please? thanks

yeah. it should be document.getElementById

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

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 '

This function does'nt work.

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

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

Select all Open in new window

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

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

that's cool.

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

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?

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

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

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

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.

Just clear the value like so:

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

Select all Open in new window

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

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

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

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>

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?

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

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.

<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:TextBox>
               
            </td>
        </tr>
        <tr>
            <td class="style36" colspan="2">
                <asp:Label ID="Label18" runat="server" Text="Second Position:"  class="style35"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="TextBox2" runat="server" Width="377px" Style="margin-left: 0px"
                    CssClass="style2"></asp:TextBox>
               
            </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:TextBox>
            </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:TextBox>
                   

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

Add this row

newBox.value = "";

Select all Open in new window

before the appendchild one, to clear the typed content.

thanks for working hard on my question.