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

document.body & appendChild question

P: n/a
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.body 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.createElement("html");

alert("Created HTML Object");

__tmp_bodyObj = __tmp_newDoc.createElement("body");

alert("Created BODY Object");

// Create a Form Object.
__tmp_formObj = __tmp_newDoc.createElement("form");
__tmp_formObj.name = _TMP_FORMNAME;
__tmp_formObj.action = "framehandler02.php";
__tmp_formObj.method = "post";
__tmp_formObj.target = "FRAME01";

alert("Created FORM Object");

// Create an Input Element object.
__tmp_input01 = __tmp_newDoc.createElement("input");
__tmp_input01.type = "text";
__tmp_input01.value = "BLAH";
__tmp_input01.name = "FRMTXT01";

alert("Created INPUT Object");

// Append the Input element object to the Form Object.
__tmp_formObj.appendChild(__tmp_input01);

alert("Appended INPUT to FORM");

__tmp_bodyObj.appendChild(__tmp_formObj);

alert("Appended FORM to BODY");

__tmp_htmlObj.appendChild(__tmp_bodyObj);

alert("Appended BODY to HTML");

// Append the Form Object to the document body.
__tmp_newDoc.appendChild(__tmp_htmlObj);

alert("Appended HTML to Document");

// Close the new document in FRAME02
__tmp_newDoc.close();
}
.... 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.
Jul 23 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a


skubik wrote:

<frameset rows="30%,30%,*" border="1" noresize>
<frame src="" name="FRAME01" border="1"/>
Try with
<frame src="about:blank"
__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/
Jul 23 '05 #2

P: n/a
skubik wrote:
<snip>
... I get the following error in my Javascript Console
(Firefox 1.0):

__tmp_newDoc.body has no properties.
Given that the posted code does not include the property accessor -
__tmp_newDoc.body - 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.createElement("html");
Given that - __tmp_newDoc - has an undefined value, this line should
error ("__tmp_newDoc has no properties"). No more code form this
function will execute after the error.
__tmp_bodyObj = __tmp_newDoc.createElement("body"); <snip> __tmp_formObj = __tmp_newDoc.createElement("form"); <snip> __tmp_input01 = __tmp_newDoc.createElement("input");
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.close();


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.
Jul 23 '05 #3

P: n/a
skubik wrote:
Hi everyone.

[...]

Combining the advice above:

<frame src="about:blank" 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.getElementsByTagName('body')[0];

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

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

// Append the Input element object to the Form Object.
formObj.appendChild(input01);
docBody.appendChild(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
Jul 23 '05 #4

P: n/a
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.elements[0].value = "CHANGED!";

alert("Action: " + __tmp_formObj.action + "\nMethod: " +
__tmp_formObj.method + "\nTarget: " + __tmp_formObj.target);

__tmp_formObj.submit();
}

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 [nsIDOMHTMLFormElement.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:blank" 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.getElementsByTagName('body')[0];

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

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

// Append the Input element object to the Form Object.
formObj.appendChild(input01);
docBody.appendChild(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.

Jul 23 '05 #5

P: n/a


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.elements[0].value = "CHANGED!";

alert("Action: " + __tmp_formObj.action + "\nMethod: " +
__tmp_formObj.method + "\nTarget: " + __tmp_formObj.target);

__tmp_formObj.submit();
}

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 [nsIDOMHTMLFormElement.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/
Jul 23 '05 #6

P: n/a
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.
Jul 23 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.