Have created a simple form which you can extend infinatley, I want the form to add up the extend values, but I cant get the extended bit to add its values together and then place it in a box as part of another sum. How do you get the values out of the DIV and into another FORM? Thanks.

CODE:

<HTML>
<HEAD>
<TITLE></TITLE>
<script language="JavaScript">

var counter = 0;

<!-- This bit Adds more form fields

function moreFields()
{
counter++;
var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++)
{
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
window.onload = moreFields;

function init()
{
moreFields();
}

// End of the Form Field Adder -->


function computeSum(form)
{

form.TotalOptionValues_Column1.value = ((form.input_box.value) * 1).toFixed(1);

form.TotalOptionValues_Column2.value = ((form.Value1.value) * 1) .toFixed(1);

form.TotalOptionValues_Difference.value = ((form.TotalOptionValues_Column2.value * 1) -
(form.TotalOptionValues_Column1.value * 1).toFixed(1));

}

</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {background-attachment: fixed;
}
-->
</style>
</HEAD>
<BODY bgcolor="#FFFFFF">
<FORM >
<table width="620" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="9" colspan="3"> <table width="100%" height="21" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="20%"><div align="right"><strong><font color="#006633" size="-1" face="Arial, Helvetica, sans-serif">V</font><font color="#006633" size="-1" face="Arial, Helvetica, sans-serif">alue
1:&nbsp;&nbsp;</font></strong></div></td>
<td width="80%"><input name="Value1" class="txt" id="Value1" value="0" size=15 maxlength="15"></td>
</tr>
</table></td>
</tr>
<tr>
<td height="17" colspan="3">&nbsp;</td>
</tr>
<tr>
<td width="269"><div align="center"><font size="-1" face="Arial, Helvetica, sans-serif"><strong>Option
Name</strong></font></div></td>
<td width="203"><div align="right"><font size="-1" face="Arial, Helvetica, sans-serif"><strong>
</strong></font></div></td>
<td width="148"><div align="right"><font size="-1" face="Arial, Helvetica, sans-serif"></font></div></td>
</tr>
</table>

<div id="readroot" style="display: none">
<p>
<select name="input_box" id="">
<option value="0">---- Click here to select your Option ----</option>
<option value="1.2">Option1</option>
<option value="1.3">Option2</option>
<option value="1.2">Option3</option>
<option value="1.7">Option4</option>
<option value="2.1">Option5</option>
</select>
<input name="button2" type="button"
onClick="
this.parentNode.parentNode.removeChild(this.parentNode);
" value="Remove">
</div>
<span id="writeroot"></span>
<TABLE width="620" BORDER=0 cellpadding="3" cellspacing="0">
<TR>
<TD WIDTH=206><div align="right"><strong>
<input name="button" type="button" onClick="moreFields()" value="Add an Option">
</strong></div></TD>
<TD WIDTH=128><div align="center"> </div></TD>
<TD colspan="2"> <div align="right"> <font size="-1" face="Arial, Helvetica, sans-serif">
</font></div></TD>
</TR>
<TR>
<TD colspan="4">&nbsp;</TD>
</TR>
<TR>
<TD><div align="right"><strong></strong></div></TD>
<TD WIDTH=128><div align="center"><font size="-1" face="Arial, Helvetica, sans-serif"><strong>Column
1</strong></font></div></TD>
<TD WIDTH=138><div align="center"><font size="-1" face="Arial, Helvetica, sans-serif"><strong>Column
2</strong></font></div></TD>
<TD WIDTH=145><div align="center"><font size="-1" face="Arial, Helvetica, sans-serif"><strong>Difference</strong></font></div></TD>
</TR>
<TR>
<TD><div align="right"><font size="-1" face="Arial, Helvetica, sans-serif"><strong>Total Option Values</strong></font></div></TD>
<TD WIDTH=128><div align="center">
<input name="TotalOptionValues_Column1" id="TotalOptionValues_Column1" value="0" size=15 maxlength="15" onKeyPress="alert('This field will be completed automatically. You do not need to edit this field.'); return false;">
</div></TD>
<TD WIDTH=138><div align="center">
<input name="TotalOptionValues_Column2" id="TotalOptionValues_Column2" size=15 maxlength="15" onKeyPress="alert('This field will be completed automatically. You do not need to edit this field.'); return false;">
</div></TD>
<TD WIDTH=145><div align="center">
<input name="TotalOptionValues_Difference" id="TotalOptionValues_Difference" onKeyPress="alert('This field will be completed automatically. You do not need to edit this field.'); return false;" value="0" size=15 maxlength="15">
</div></TD>
</TR>
<TR>
<TD><div align="right"><strong></strong></div></TD>
<TD><div align="center"></div></TD>
<TD><div align="center"></div></TD>
<TD><div align="center"></div></TD>
</TR>
<TR>
<TD><div align="right"><font size="-1" face="Arial, Helvetica, sans-serif"><I>Click
this button to <br>
calculate Values</I> </font></div></TD>
<TD><div align="center">
<input name="calc" value="CALCULATE" type=BUTTON onClick=computeSum(this.form)>
</div></TD>
<TD>&nbsp;</TD>
<TD><div align="center"></div></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>