Avatar of zachvaldez
zachvaldez
Flag for United States of America asked on

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

Avatar of undefined
Last Comment
zachvaldez

8/22/2022 - Mon
ienaxxx

try this

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

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

ASKER
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..
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
zachvaldez

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

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

ASKER
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.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
zachvaldez

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

ASKER
can someone put his thoughts on this please? thanks
zachvaldez

ASKER
yeah. it should be document.getElementById
Your help has saved me hundreds of hours of internet surfing.
fblack61
zachvaldez

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

ASKER
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 '
zachvaldez

ASKER
This function does'nt work.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
ienaxxx

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
jinsonaf

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

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

This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
zachvaldez

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

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

ASKER
that's cool.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
mcnute

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

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

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.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
zachvaldez

ASKER
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
zachvaldez

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

Just clear the value like so:

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

Open in new window

⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
zachvaldez

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

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

ASKER
where will this line be added
$('yourclonedtextbox').val('');
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
zachvaldez

ASKER
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???
Scott Fell

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

ASKER
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?
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
zachvaldez

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

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

ASKER
<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>
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
Scott Fell

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

Add this row
newBox.value = "";

Open in new window


before the appendchild one, to clear the typed content.
ASKER CERTIFIED SOLUTION
ienaxxx

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
zachvaldez

ASKER
thanks for working hard on my question.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.