View Full Version : Getting Values from a DIV into a FORM?

05-26-2006, 10:20 AM
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.


<script language="JavaScript">

var counter = 0;

<!-- This bit Adds more form fields

function moreFields()
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');
window.onload = moreFields;

function init()

// 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));


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

<div id="readroot" style="display: none">
<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>
<input name="button2" type="button"
" value="Remove">
<span id="writeroot"></span>
<TABLE width="620" BORDER=0 cellpadding="3" cellspacing="0">
<TD WIDTH=206><div align="right"><strong>
<input name="button" type="button" onClick="moreFields()" value="Add an Option">
<TD WIDTH=128><div align="center"> </div></TD>
<TD colspan="2"> <div align="right"> <font size="-1" face="Arial, Helvetica, sans-serif">
<TD colspan="4">&nbsp;</TD>
<TD><div align="right"><strong></strong></div></TD>
<TD WIDTH=128><div align="center"><font size="-1" face="Arial, Helvetica, sans-serif"><strong>Column
<TD WIDTH=138><div align="center"><font size="-1" face="Arial, Helvetica, sans-serif"><strong>Column
<TD WIDTH=145><div align="center"><font size="-1" face="Arial, Helvetica, sans-serif"><strong>Difference</strong></font></div></TD>
<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;">
<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;">
<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">
<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>
<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)>
<TD><div align="center"></div></TD>