Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Getting Values from a DIV into a FORM?

Status
Not open for further replies.
lightyear2000

lightyear2000

Programmer
Joined
May 18, 2006
Messages
2
Location
GB
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.name
if (theName)
newField.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>
 
Sort by date Sort by votes
Your morefields function is never assigning an ID or Name to the select box.
If you alert out the values you will find that
if (theName)
never evaluates true and no value is ever set for the name or id tag. Without a name or ID to go by you are hard pressed to read the selected values and calculate them.
You could retrieve every select statement on the page and read their values but if you had any non-related select boxes you would of course run into problems with them being included in the calculations as well.


It's hard to think outside the box when I'm trapped in a cubicle.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Locked
  • Question Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid)
Replies
5
Views
2K
Mike Lewis
Mike Lewis
lexer
  • Locked
  • Question Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
1K
lexer
lexer
malpa
  • Locked
  • Question Question
Graph the selection of a html table row
Replies
0
Views
1K
malpa
malpa
JScannell
  • Locked
  • Question Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
2K
ggriffit
ggriffit
TheLazyPig
  • Locked
  • Question Question
Buttons not aligned after another button is clicked
Replies
2
Views
677
gmmastros
gmmastros

Part and Inventory Search

Sponsor

Back
Top