Form appendChild not working ... [Archive]

asadikhan

05-21-2004, 02:54 AM

Hi,

I have a simple two frame page (top and bottom; parent called index). and I am trying to dynamically create forms in the bottom frame when buttons are clicked on the top page. But I keep getting an error in the line labelled * below inside addBlock1(). Here is my code (which is in top.html):

<script type="text/javascript" language="javascript">
function init() {
var x = ("<HTML>\n");
x += ("<HEAD></HEAD>\n");
x += ("<BODY>\n");
x += ("<FORM NAME=\"bottomform\" METHOD=\"POST\">\n");
x += ("</FORM>\n");
parent.bottom.document.write(x);
}
function foo(x) {

if (x == '1') {
// User clicked Button 1 so add Block 1
addBlock1();
}
else if (x == '2') {
// User clicked Button 2 so add Block 2
}
else if (x == '3') {
// User clicked Button 3 so add Block 3
}
else {
// User clicked other Button
}
}

function addBlock1() {

var elem = input( 'text', 'textbox', '' );
parent.bottom.document.bottomform.appendChild( elem ); //*

}

function input( typ, nm, val )
{
var elem = document.createElement( "input" );
elem.type = typ;
elem.name = nm;
elem.value = val;
return elem;
}

function wrapup() {
var x = ("</BODY>\n");
x += ("</HTML>\n");
parent.bottom.document.write(x);
}

</script>

Any idea what I'm doing wrong?

Kor

05-21-2004, 03:14 AM

try

var elem = new input( 'text', 'textbox', '' );

asadikhan

05-21-2004, 03:45 AM

Nopes! That doesn't help. Same problem ...

Any other ideas?

fredmv

05-21-2004, 05:15 AM

Do you have a link to the page in which has this code implemented on it?

asadikhan

05-21-2004, 06:38 AM

I'm running it on localhost, but I will post the bodies here:

index.htm
---------

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Layout Wizard</title>
</head>

<frameset rows="25%,75%">
<frame name="top" src="top.htm">
<frame name="bottom" src="bottom.htm">
<noframes>
<body>

<p>This page uses frames, but your browser doesn't support them.</p>

</body>
</noframes>
</frameset>

</html>

top.htm
--------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
a:link {text-decoration: none; color: black; }
a:visited {text-decoration: none; color: black; }
a:active {text-decoration: none; color: black; }
a:hover {color: #888888; }
</style>

<script type="text/javascript" language="javascript">
function init() {
var x = ("<HTML>\n");
x += ("<HEAD></HEAD>\n");
x += ("<BODY>\n");
x += ("<FORM NAME=\"bottomform\" METHOD=\"POST\" ACTION=\"\">\n");
x += ("</FORM>\n");
parent.bottom.document.write(x);
}
function foo(x) {

if (x == '1') {
// User clicked Button 1 so add Block 1
addBlock1();
}
else if (x == '2') {
// User clicked Button 2 so add Block 2
}
else if (x == '3') {
// User clicked Button 3 so add Block 3
}
else {
// User clicked other Button
}
}

function addBlock1() {

var elem = input( 'text', 'textbox1', '' );
//alert (elem.type);

parent.bottom.document.forms['bottomform'].appendChild( elem );

return 0;
}

function input( typ, nm, val )
{
var elem = document.createElement( "input" );
elem.type = typ;
elem.name = nm;
elem.value = val;
return elem;
}
function label( lbl, elem )
{
var l = document.createElement( "label" );
l.htmlFor = elem + this.fsCounter;
l.appendChild( document.createTextNode( lbl ) );
return l;
}
function wrapup() {
var x = ("</BODY>\n");
x += ("</HTML>\n");
parent.bottom.document.write(x);
}

</script>

<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Layout Wizard Blocks</title>
</head>

<body bgcolor="#CCCCCC" onload="init()">
<center>
<font face="Verdana" size="3">
<form method="POST" action="/layoutwizard/servlet/asad/CreateBlock" target= "bottom">


<input type="button" value="Add Block 1" name="btnblock1" onclick="foo('1')" />
<input type="button" value="Add Block 2" name="btnblock2" onclick="foo('2')" />
<input type="button" value="Add Block 3" name="btnblock3" onclick="foo('3')" />
<p></p>
<input type="button" value="Done" name="btnDone" onclick="wrapup()" />
<a href="blockhelp.htm" target="_blank">?</a>
</form>
</font>
</center>
</body>

</html>

and bottom.htm is just a blank page

asadikhan

05-21-2004, 06:46 AM

I'm running it on localhost, but I will post the bodies here:

index.htm
---------

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Layout Wizard</title>
</head>

<frameset rows="25%,75%">
<frame name="top" src="top.htm">
<frame name="bottom" src="bottom.htm">
<noframes>
<body>

<p>This page uses frames, but your browser doesn't support them.</p>

</body>
</noframes>
</frameset>

</html>

top.htm
--------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
a:link {text-decoration: none; color: black; }
a:visited {text-decoration: none; color: black; }
a:active {text-decoration: none; color: black; }
a:hover {color: #888888; }
</style>

<script type="text/javascript" language="javascript">
function init() {
var x = ("<HTML>\n");
x += ("<HEAD></HEAD>\n");
x += ("<BODY>\n");
x += ("<FORM NAME=\"bottomform\" METHOD=\"POST\" ACTION=\"\">\n");
x += ("</FORM>\n");
parent.bottom.document.write(x);
}
function foo(x) {

if (x == '1') {
// User clicked Button 1 so add Block 1
addBlock1();
}
else if (x == '2') {
// User clicked Button 2 so add Block 2
}
else if (x == '3') {
// User clicked Button 3 so add Block 3
}
else {
// User clicked other Button
}
}

function addBlock1() {

var elem = input( 'text', 'textbox1', '' );
//alert (elem.type);

parent.bottom.document.forms['bottomform'].appendChild( elem );

return 0;
}

function input( typ, nm, val )
{
var elem = document.createElement( "input" );
elem.type = typ;
elem.name = nm;
elem.value = val;
return elem;
}
function label( lbl, elem )
{
var l = document.createElement( "label" );
l.htmlFor = elem + this.fsCounter;
l.appendChild( document.createTextNode( lbl ) );
return l;
}
function wrapup() {
var x = ("</BODY>\n");
x += ("</HTML>\n");
parent.bottom.document.write(x);
}

</script>

<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Layout Wizard Blocks</title>
</head>

<body bgcolor="#CCCCCC" onload="init()">
<center>
<font face="Verdana" size="3">
<form method="POST" action="/layoutwizard/servlet/asad/CreateBlock" target= "bottom">


<input type="button" value="Add Block 1" name="btnblock1" onclick="foo('1')" />
<input type="button" value="Add Block 2" name="btnblock2" onclick="foo('2')" />
<input type="button" value="Add Block 3" name="btnblock3" onclick="foo('3')" />
<p></p>
<input type="button" value="Done" name="btnDone" onclick="wrapup()" />
<a href="blockhelp.htm" target="_blank">?</a>
</form>
</font>
</center>
</body>

</html>

and bottom.htm is just a blank page