By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
426,034 Members | 1,777 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 426,034 IT Pros & Developers. It's quick & easy.

Inserting textnode or table inside FORM tag

P: n/a
I have a form on a page that has several textareas, and textboxes
inside a table (so the table containing the textboxes is also inside
the FORM tag).

I want to replace the textareas with simple text instead. But I want
to keep the format of my page EXACTLY the same. However, the problem
is that ...

1) Javascript won't let me create say a one-cell TABLE containing some
text (e.g. textarea's value) and then insertBefore an element in the
form. This is so because the a TABLE element is not compatible to be a
FORM's child.

2) I surely can insert a text node or a table using appendChild or
insertBefore on document.body. However, like I said I must maintain
the formatting of my page, so I again can not do this. Reason being
that the document.body won't have access to anything that's inside the
FORM tag and can only insert before or after the FORM tag.

e.g.

<BODY>
<P id="para1">foo</P>
<FORM id=form1">
<!-- anything in here is Form's property NOT body's -->
<input type="text" name="name" id="txtbox1">
</FORM>
</BODY>

So the following code is invalid:

var tNode = document.createTextNode ("hello");
document.body.insertBefore (tNode,
document.forms[0].getElementsByTagName ("txtbox1"));

because I can't insert a textnode before a form element using a body
method.
And following code is valid but not what I want according to my second
point above:

var tNode = document.createTextNode ("hello");
document.body.appendChild (tNode);
How can I insert a text node or table containing text inside FORM
tags?
Jul 23 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
Asad wrote:
I have a form on a page that has several textareas, and
textboxes inside a table (so the table containing the
textboxes is also inside the FORM tag).
As it must be.
I want to replace the textareas with simple text instead.
if(document.createTextNode && document.getElementById){
var tNode = document.createTextNode ("hello");
var txtArea = document.getElementById("txtbox1");
if((tNode)&&
(txtArea)&&
(txtArea.parentNode)&&
(txtArea.parentNode.replaceChild)
){
txtArea.parentNode.replaceChild(tNode, txtArea);
}
}
But I want to keep the format of my page EXACTLY the
same. However, the problem is that ... 1) Javascript won't let me create say a one-cell TABLE
containing some text (e.g. textarea's value) and then
insertBefore an element in the form. This is so because
the a TABLE element is not compatible to be a
FORM's child.
Tables are completely compatible with being a child of a form. You are
getting confused about the DOM tree structure. The form control
(textarea) within a table is a descendent of the form, but it is a child
of its containing TD element, and it would be the insertBefore method of
that TD element that would need to be called in order to insert anything
before the textarea. (Though your stated goal is to replace the textarea
so insertBefore doesn't sound like the method to be using).
2) I surely can insert a text node or a table using
appendChild or insertBefore on document.body. However,
like I said I must maintain the formatting of my page,
so I again can not do this. Reason being that the
document.body won't have access to anything that's inside
the FORM tag and can only insert before or after the FORM
tag.
In your example the only child of the BODY is the FORM. The TEXTAREA is
a child of the FORM.
e.g.

<BODY>
<P id="para1">foo</P>
<FORM id=form1">
<!-- anything in here is Form's property NOT body's -->
<input type="text" name="name" id="txtbox1">
</FORM>
</BODY>

So the following code is invalid:

var tNode = document.createTextNode ("hello");
document.body.insertBefore (tNode,
document.forms[0].getElementsByTagName ("txtbox1")); ^^^^^^^^^^^^^^^^^^^^
The getElementsByTagName method returns a - nodeList - object not a
Node, it is expecting its argument to be a tag name, which may have been
"TEXTAREA" in this case.

But more likely you should refer to an IDed textarea with:-

document.getElementById("txtbox1")

- or -

document.forms[0].elements['txtbox1']

- or -

document.forms['form1'].elements['txtbox1']

If you insist on using getElementsByTagName you need to pass the tag
name as an argument (eg 'TEXTAREA') and then index the textarea element
in question from the returned nodeList:-

document.forms[0].getElementsByTagName ("TEXTAREA")[0]

Then you have the problem with using the insertBefore method on the BODY
element. The textarea is not a child of the BODY element so that method
is specified as throwing a NOT_FOUND_ERR exception when it turns out
that its second argument is not one of its children.
because I can't insert a textnode before a form element
using a body method.
You probably can, but you don't appear to have tried to do that yet, and
it is not what you want to do anyway.
And following code is valid but not what I want according
to my second point above:

var tNode = document.createTextNode ("hello");
document.body.appendChild (tNode);
How can I insert a text node or table containing text
inside FORM tags?


Using the insertBefore or appendChild methods of the FORM element, but
that is still not what you want to do. To replace the textarea Element
with a text Node use the code I listed above (first).

Richard.
Jul 23 '05 #2

P: n/a
"Richard Cornford" <ri*****@litotes.demon.co.uk> wrote in message
news:c9**********@hercules.btinternet.com...
Asad wrote:
I have a form on a page that has several textareas, and
textboxes inside a table (so the table containing the ^^^^^^^^^ textboxes is also inside the FORM tag). <snip> <BODY>
<P id="para1">foo</P>
<FORM id=form1">
<!-- anything in here is Form's property NOT body's -->
<input type="text" name="name" id="txtbox1">
</FORM>
</BODY> <snip> document.forms[0].getElementsByTagName ("txtbox1"));
<snip> document.forms[0].getElementsByTagName ("TEXTAREA")[0]

<snip>
For text boxes (<input type="text">) that would be:-

document.forms[0].getElementsByTagName ("INPUT")[0]

-everything else would be the same.

Richard.
Jul 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.