Asad wrote:[color=blue]
> 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).[/color]
As it must be.
[color=blue]
> I want to replace the textareas with simple text instead.[/color]
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);
}
}
[color=blue]
> But I want to keep the format of my page EXACTLY the
> same. However, the problem is that ...[/color]
[color=blue]
> 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.[/color]
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).
[color=blue]
> 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.[/color]
In your example the only child of the BODY is the FORM. The TEXTAREA is
a child of the FORM.
[color=blue]
> 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"));[/color]
^^^^^^^^^^^^^^^^^^^^
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.
[color=blue]
> because I can't insert a textnode before a form element
> using a body method.[/color]
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.
[color=blue]
> 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?[/color]
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.
