Reading Dynamic Form Contents


2004-05-17 06:56:21 PM
jbuilder21
I have created a dynamic form using Javascript. It basically has one textbox
in the beginning, and it has two buttons. Which the user can click to add
additional textboxes. And the whole deal is recursive, so you really don't
know how many textboxes are gonna come at you.
Now I need to read the contents of this form. One thing I did by the way, is
that all the textboxes have unique (systematic) names e.g. textBox1_0_0,
textBox1_1_0, textBox3_0_1, etc.
So how can I do this?
Here is the Javascript code btw, in case anyone's interested.
------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
</style>
<script type="text/javascript" language="javascript">
function init()
{
window.myForm = new DynamicForm( document.forms[0] )
}
function DynamicForm( f )
{
this.form = f;
this.fsCounter = 0;
}
DynamicForm.prototype.addSibling = function( name )
{
this.fsCounter++;
var f = fieldset( name + this.fsCounter);
f.style.padding = 25
f.appendChild( label( 'Head','Head', '' ) );
f.appendChild( input( 'text', 'Head', '' ) );
f.appendChild( removeButton( this.form, f ) );
// 'level' contains the level of subhead that is passed on to addChild
function.
// Initially this is 0 (see function call in the body tags).
// 'mainNum' is an enum of the outermost Sub Heads.
// 'groundLevelChildNum' is the number in sequence of this ground level
(1st) child
f.appendChild( addChildButton( this.form, f, 0, this.fsCounter, 0 ) );
//f.appendChild( br() );
this.form.appendChild( f );
function input( typ, nm, val )
{
var elem = document.createElement( "input" );
elem.type = typ;
elem.name = nm + this.fsCounter;
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 fieldset( nm )
{
var fs = document.createElement( "fieldset" );
var legend = document.createElement( "legend" );
legend.appendChild( document.createTextNode( nm ) );
fs.appendChild( legend );
return fs;
}
function removeButton( frm, elem )
{
elem.appendChild( br() );
var b = input( 'button', 'Remove', 'Remove Sub-Head' );
b.attachEvent( "onclick", function() { frm.removeChild( elem ); } );
// I could descrease the fsCounter by placing the following
// in the onClick function body above: window.myForm.fsCounter--;
// However, that causes duplicate IDs unless all tree is renumbered.
// Therefore, not recommended.
return b;
}
// 'lvl' contains the level of subhead that is passed on to addChild
function.
// Initially this is 0 (see function call in the body tags).
// 'n' or 'mainNum' is an enum of the outermost Sub Heads.
function addChildButton( frm, elem, lvl, n, groundLevelChildNum )
{
var b = input( 'button', 'addChild', 'Add Child' );
b.attachEvent( "onclick", function() { var g = fieldset( 'Sub Head ' + n +
'.' + groundLevelChildNum + "." + lvl ); g.style.padding=20;
g.style.marginLeft='1cm'; g.appendChild( input( 'text', 'textBox' + n + '_'
+ groundLevelChildNum + "_" + lvl, '' ) ); g.appendChild( br() );
g.appendChild( removeChildButton( elem, g ) ); g.appendChild(
addChildButton( frm, g, lvl+1, n, groundLevelChildNum++ ) );
elem.appendChild(g); } );
return b;
}
function removeChildButton( elem1, elem2)
{
var b = input( 'button', 'Remove', 'Remove' );
b.attachEvent( "onclick", function() { elem1.removeChild( elem2 ) } );
return b;
}
function br()
{
return document.createElement( "br" );
}
}
</script>
</head>
<body onload="init()">
<form name="theForm" action="">
Name/Head:
<input type="text" name="rootnamehead">
<br/>
<input type="button" value="Add Sub-Head" onclick="myForm.addSibling( 'Sub
Head' )" />
</form>
</body>
</html>