document.body & appendChild question

[skubik]

Hi everyone.

I'm attempting to write a Javascript that will create a form within a
brand-new document in a specific frame of a frameset. The problem is
that I can create the form and input element using createElement() , but
when I go to append the form element into the new document, the script
halts and I get the following error in my Javascript Console (Firefox 1.0):

__tmp_newDoc.bo dy has no properties.

Here is the frameset definition:

Code:
<frameset rows="30%,30%,* " border="1" noresize>
<frame src="" name="FRAME01" border="1"/>
<frame src="" name="FRAME02" border="1"/>
<frame src="framedom02 .html" name="FRAME03" border="1"/>
</frameset>
framedom02.html essentially just loads the Javascript library and calls
a function from onLoad in the BODY tag.

The javascript being used is as follows:

Code:

function createForm()
{
_TMP_FORMNAME = "form01";

// Open a new document for FRAME02.
__tmp_newDoc = parent.frames['FRAME02'].document.open( );

__tmp_htmlObj = __tmp_newDoc.cr eateElement("ht ml");

alert("Created HTML Object");

__tmp_bodyObj = __tmp_newDoc.cr eateElement("bo dy");

alert("Created BODY Object");

// Create a Form Object.
__tmp_formObj = __tmp_newDoc.cr eateElement("fo rm");
__tmp_formObj.n ame = _TMP_FORMNAME;
__tmp_formObj.a ction = "framehandler02 .php";
__tmp_formObj.m ethod = "post";
__tmp_formObj.t arget = "FRAME01";

alert("Created FORM Object");

// Create an Input Element object.
__tmp_input01 = __tmp_newDoc.cr eateElement("in put");
__tmp_input01.t ype = "text";
__tmp_input01.v alue = "BLAH";
__tmp_input01.n ame = "FRMTXT01";

alert("Created INPUT Object");

// Append the Input element object to the Form Object.
__tmp_formObj.a ppendChild(__tm p_input01);

alert("Appended INPUT to FORM");

__tmp_bodyObj.a ppendChild(__tm p_formObj);

alert("Appended FORM to BODY");

__tmp_htmlObj.a ppendChild(__tm p_bodyObj);

alert("Appended BODY to HTML");

// Append the Form Object to the document body.
__tmp_newDoc.ap pendChild(__tmp _htmlObj);

alert("Appended HTML to Document");

// Close the new document in FRAME02
__tmp_newDoc.cl ose();
}
.... it NEVER makes it to the last Alert. I've tried a few other ways of
doing it, but haven't had any results with them either. What am I doing
wrong here?

Thanks,

- skubik.

[Martin Honnen]

skubik wrote:

<frameset rows="30%,30%,* " border="1" noresize>
<frame src="" name="FRAME01" border="1"/>
Try with
<frame src="about:blan k"
__tmp_newDoc = parent.frames['FRAME02'].document.open( );

Don't use the document.open call, it is needed if you want to use
document.write on the document but not for DOM manipulation.

--

Martin Honnen
http://JavaScript.FAQTs.com/

[Richard Cornford]

skubik wrote:
<snip>

... I get the following error in my Javascript Console
(Firefox 1.0):

__tmp_newDoc.bo dy has no properties.
Given that the posted code does not include the property accessor -
__tmp_newDoc.bo dy - it is unlikely that your problem is entirely
contained in the posted function. If this is the only error reported
then fixing the problems in that function will not correct that error.
An if it is not the only error, and not the first error, then it would
be advisable to address the generated errors in the order in which they
happen.

<snip> function createForm()
{
_TMP_FORMNAME = "form01";

// Open a new document for FRAME02.
__tmp_newDoc = parent.frames['FRAME02'].document.open( );
The - open - method of documents does not have a return value so the
above line will assign an undefined value to - __tmp_newDoc -.
__tmp_htmlObj = __tmp_newDoc.cr eateElement("ht ml");
Given that - __tmp_newDoc - has an undefined value, this line should
error ("__tmp_newD oc has no properties"). No more code form this
function will execute after the error.
__tmp_bodyObj = __tmp_newDoc.cr eateElement("bo dy"); <snip> __tmp_formObj = __tmp_newDoc.cr eateElement("fo rm"); <snip> __tmp_input01 = __tmp_newDoc.cr eateElement("in put");
I assume that you are using all of these strange variable names in order
to avoid naming conflicts in the global namespace. However, there seems
little chance that all (if any) of these variables should be exposed in
the global namespace.

Wherever possible function local variables should be used, which avoids
any concerns about naming conflicts in the global namespace. It also
generally results in better (more direct, comprehensible, maintainable,
manageable, ect.) code.

<snip> __tmp_newDoc.cl ose();

The - document.open - and - document.close - methods are intended for
use with - document.write/ln - and are not appropreate in code that is
using DOM Core node creation/manipulation methods (and are very likely
to cause all sorts of cross-browser issues in this context).

Richard.

[RobG]

skubik wrote:

Hi everyone.

[...]

Combining the advice above:

<frame src="about:blan k" name="FRAME02" border="1"/>

and your script should look like (all those underscores and
capitals are ugly IMHO, but use 'em if you like):

function createForm(){
var formName = 'form01';
var F = parent.frames['FRAME02'];
var docBody = F.document.getE lementsByTagNam e('body')[0];

// Create a Form Object.
var formObj = document.create Element("form") ;
formObj.name = formName;
formObj.action = "framehandler02 .php";
formObj.method = "post";
formObj.target = "FRAME01";

// Create an Input Element object.
var input01 = document.create Element("input" );
input01.type = "text";
input01.value = "BLAH";
input01.name = "FRMTXT01";

// Append the Input element object to the Form Object.
formObj.appendC hild(input01);
docBody.appendC hild(formObj);
}
Incidentally, best to declare vairables with "var" to keep 'em
local. That way they are cleaned up when the function ends and
don't linger as globals.

--
Rob

[skubik]

Thanks RobG (and others) for your help. I rewrote the function and it
works great now. But I'm having a problem submitting the form from
Javascript now.

Here's the code that I'm using to submit the form (sorry about the
'strange' variable names, I'm just strange I guess):

const FORMNAME = "form01";

function sendForm()
{
var __tmp_formObj = parent.frames['FRAME02'].document.forms[FORMNAME];

__tmp_formObj.e lements[0].value = "CHANGED!";

alert("Action: " + __tmp_formObj.a ction + "\nMethod: " +
__tmp_formObj.m ethod + "\nTarget: " + __tmp_formObj.t arget);

__tmp_formObj.s ubmit();
}

This function is called by clicking on a hyperlink in the same frame
that the script itself resides in (in this case, FRAME03).

Everything works up until the submit function. Here is what Firefox's
Javascript Console came up with:

Error: uncaught exception: [Exception... "Component returned failure
code: 0x804b000a [nsIDOMHTMLFormE lement.submit]" nsresult: "0x804b000a
(<unknown>)" location: "JS frame ::
http://localhost:8000/homepage/dev/jsdom02.js :: sendForm :: line 41"
data: no]

Everything displayed in the alert comes up properly, so I assume that I
'have' the right object, so why is it that .submit() won't work?

TIA,

- skubik.
RobG wrote:

skubik wrote:

Hi everyone.

[...]

Combining the advice above:

<frame src="about:blan k" name="FRAME02" border="1"/>

and your script should look like (all those underscores and
capitals are ugly IMHO, but use 'em if you like):

function createForm(){
var formName = 'form01';
var F = parent.frames['FRAME02'];
var docBody = F.document.getE lementsByTagNam e('body')[0];

// Create a Form Object.
var formObj = document.create Element("form") ;
formObj.name = formName;
formObj.action = "framehandler02 .php";
formObj.method = "post";
formObj.target = "FRAME01";

// Create an Input Element object.
var input01 = document.create Element("input" );
input01.type = "text";
input01.value = "BLAH";
input01.name = "FRMTXT01";

// Append the Input element object to the Form Object.
formObj.appendC hild(input01);
docBody.appendC hild(formObj);
}
Incidentally, best to declare vairables with "var" to keep 'em
local. That way they are cleaned up when the function ends and
don't linger as globals.

[Martin Honnen]

skubik wrote:

const FORMNAME = "form01";
Just a note, const is a Mozilla/Netscape JavaScript extension not
implemented by other engines, if you are writing for an intranet where
only Mozilla browsers are used then it is fine to use const but if you
intend to write for the web then don't use const, use var.
function sendForm()
{
var __tmp_formObj = parent.frames['FRAME02'].document.forms[FORMNAME];

__tmp_formObj.e lements[0].value = "CHANGED!";

alert("Action: " + __tmp_formObj.a ction + "\nMethod: " +
__tmp_formObj.m ethod + "\nTarget: " + __tmp_formObj.t arget);

__tmp_formObj.s ubmit();
}

This function is called by clicking on a hyperlink in the same frame
that the script itself resides in (in this case, FRAME03).

Everything works up until the submit function. Here is what Firefox's
Javascript Console came up with:

Error: uncaught exception: [Exception... "Component returned failure
code: 0x804b000a [nsIDOMHTMLFormE lement.submit]" nsresult: "0x804b000a
(<unknown>)" location: "JS frame ::
http://localhost:8000/homepage/dev/jsdom02.js :: sendForm :: line 41"
data: no]

Everything displayed in the alert comes up properly, so I assume that I
'have' the right object, so why is it that .submit() won't work?

Hard to tell, can you try to make a test case as small as possible to
reproduce that problem and then post the URL here?

--

Martin Honnen
http://JavaScript.FAQTs.com/

[skubik]

Martin Honnen wrote:

Hard to tell, can you try to make a test case as small as possible to
reproduce that problem and then post the URL here?

No prob. Here's the URL:

http://www.gotkube.com/dev/frame02.html

Click the 'Send Form' link in the red frame to start the function in
question.

Any thoughts as to what's going on? Turns out that my PHP script that
handles the form once it's submitted wasn't in the same directory, but
I'm still not getting it to even SEND the form with .submit().

- skubik.