Helpful Information
 
 
Category: JavaScript programming
Need to Calculate Fields on a Form with Javascript

My present project requires the ability to create fields on a form that will take the A) # of Units, B) Price Per Unit, and C) Total/Extended Amount or A * B = C. I want it to be dynamic in that as soon as an item is chosen from a database, then the B field fills in with the correct amount. Then, when the # of Units are entered the calculation is performed for the total.

This project is for a food inventory tracking system for a school district I work for. Any ideas would be greatly appreciated and utilized.

<html>
<script javascript>
<!-- Begin
//
// Server Side Code Would Be Required Above Script To Set Text Field Values From Database on OnLoad()
//

function DoMath(){
var Units = document.frmData.Units.value
var Rate = document.frmData.Rate.value
var Total = Units * Rate
document.frmData.Total.value = Total
}
<!-- End
</script>
<body onload="DoMath()">
<form name="frmData" method="POST" >
Units:<br>
<input type="text" onchange="DoMath()" name="Units" size="20"></p>
<p>Rate:<br>
<input type="text" onchange="DoMath()" name="Rate" size="20"></p>
<p>Total:<br>
<input type="text" name="Total" size="20"><br>
<input type="button" onclick="DoMath()" value="Update" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>
</body>
</html>

Try this it is slightly more indepth

<SCRIPT LANGUAGE="JavaScript">
<!--
function roundoff(amount) {
return (amount == Math.floor(amount)) ? amount + '.00' : ( (amount*10 == Math.floor(amount*10)) ? amount + '0' : amount);
}

function total(what,number) {
var grandTotal = 0;
for (var i=0;i<number;i++) {
if (what.elements['price' + i].value == '')
what.elements['price' + i].value = '0.00'; // fix for Opera.

what.elements['subtotal' + i].value=(what.elements['quantity' + i].value - 0) * (what.elements['price' + i].value - 0);
if (what.elements['quantity' + i].value == "0")
what.elements['subtotal' + i].value = "0.00";

subtotal=what.elements['subtotal' + i].value
grandTotal += (what.elements['price' + i].value - 0) * (what.elements['quantity' + i].value - 0);
}

subtotal=roundoff(Math.round(subtotal*Math.pow(10,2))/Math.pow(10,2));
what.grandTotal.value = roundoff(Math.round(grandTotal*Math.pow(10,2))/Math.pow(10,2));
}
//-->
</SCRIPT>

<FORM NAME="addit">
<table border=1><tr><td>Quantity: </td><td>Price:</td><td>SubTotal</td></tr>
<tr><td>
<INPUT TYPE="text" NAME="quantity0" SIZE="3" value="0" onclick="select()" onkeyup="total(this.form,10)"><BR>
<INPUT TYPE="text" NAME="quantity1" SIZE="3" value="0" onclick="select()" onkeyup="total(this.form,10)"><BR>
<INPUT TYPE="text" NAME="quantity2" SIZE="3" value="0" onclick="select()" onkeyup="total(this.form,10)"><BR>
<INPUT TYPE="text" NAME="quantity3" SIZE="3" value="0" onclick="select()" onkeyup="total(this.form,10)"><BR>
<INPUT TYPE="text" NAME="quantity4" SIZE="3" value="0" onclick="select()" onkeyup="total(this.form,10)"><BR>
<INPUT TYPE="text" NAME="quantity5" SIZE="3" value="0" onclick="select()" onkeyup="total(this.form,10)"><BR>
<INPUT TYPE="text" NAME="quantity6" SIZE="3" value="0" onclick="select()" onkeyup="total(this.form,10)"><BR>
<INPUT TYPE="text" NAME="quantity7" SIZE="3" value="0" onclick="select()" onkeyup="total(this.form,10)"><BR>
<INPUT TYPE="text" NAME="quantity8" SIZE="3" value="0" onclick="select()" onkeyup="total(this.form,10)"><BR>
<INPUT TYPE="text" NAME="quantity9" SIZE="3" value="0" onclick="select()" onkeyup="total(this.form,10)"><BR>
</td>
<td>
<input TYPE="text" NAME="price0" VALUE="0.99" SIZE="4"><BR>
<input TYPE="text" NAME="price1" VALUE="1.99" SIZE="4"><BR>
<input TYPE="text" NAME="price2" VALUE="2.99" SIZE="4"><BR>
<input TYPE="text" NAME="price3" VALUE="3.99" SIZE="4"><BR>
<input TYPE="text" NAME="price4" VALUE="4.99" SIZE="4"><BR>
<input TYPE="text" NAME="price5" VALUE="5.99" SIZE="4"><BR>
<input TYPE="text" NAME="price6" VALUE="6.99" SIZE="4"><BR>
<input TYPE="text" NAME="price7" VALUE="7.99" SIZE="4"><BR>
<input TYPE="text" NAME="price8" VALUE="8.99" SIZE="4"><BR>
<input TYPE="text" NAME="price9" VALUE="9.99" SIZE="4"><BR>
</td>
<td>
<input TYPE="text" NAME="subtotal0" SIZE="6" value="0.00"><BR>
<input TYPE="text" NAME="subtotal1" SIZE="6" value="0.00"><BR>
<input TYPE="text" NAME="subtotal2" SIZE="6" value="0.00"><BR>
<input TYPE="text" NAME="subtotal3" SIZE="6" value="0.00"><BR>
<input TYPE="text" NAME="subtotal4" SIZE="6" value="0.00"><BR>
<input TYPE="text" NAME="subtotal5" SIZE="6" value="0.00"><BR>
<input TYPE="text" NAME="subtotal6" SIZE="6" value="0.00"><BR>
<input TYPE="text" NAME="subtotal7" SIZE="6" value="0.00"><BR>
<input TYPE="text" NAME="subtotal8" SIZE="6" value="0.00"><BR>
<input TYPE="text" NAME="subtotal9" SIZE="6" value="0.00"><BR>
</tr></tr>
<tr><td colspan=3 align=right>
Grand Total<INPUT TYPE="TEXT" NAME="grandTotal" SIZE="6">
</td></tr></table>
</FORM>

MrsG - how would i combine yours with this: http://www.groundbreak.com/calculators.html
so it calculates monthly/yearly totals less expenses with quarterly and semi-annual recurring options added to the one-time and monthly options?

ideally it would be nice to have the option to enter expenses as it does now OR as 'total expenses' (not monthly). if it's easier to start from the groundbreak.com one, i need to add additional fields for up to 12 different items.

any and all help would be appreciated.

I've got a similar project going that I'm SOO close on, just not quite there.

It's a ColdFusion project so the rows are dynamic can be anywhere from 1 to unlimited (typically no more than 10). My field names are set to include an ID field, i.e, Rate_#IDField#, Qty_#IDField#, Amt_#IDField#.

How can I use either one of these functions (I've been playing around with JoeP's doMath for it's simplicity) and call based on the ID.

This is my script (that's not working): If I have the basic script looped with the rows, it does work SOME of the time (still can't figure out the conflict) but I do know that it certainly doesn't make sense to call the script multiple times on the page. I do like Mrs. G's "grand total" feature, but ideally would like to get the row by row calculation working before moving onward and upward.

Any advice is truly appreciated... I've spent way too much time on this project and I'm simply not versed in JavaScript to get it done!

--Catherine


<cfquery name="getIDList" datasource="#DSN#">
SELECT dbo.JobDetails.WorkOrderID
FROM dbo.JobDetails
WHERE dbo.JobDetails.JobID = #URL.JobID#
</cfquery>

<script type="text/JavaScript" language="JavaScript">
<cfoutput>
var #toScript(ValueList(getIDList.WorkOrderID), "IDField")#;
</cfoutput>

<!-- Begin
function DoMath(IDField){
var Total = 0;
var UnitQtyVal = 0;
var RateVal = 0;
var UnitQty = 'frmData.UnitQty_' + IDField + '.value';
var UnitQtyVal = eval(UnitQty);
var Rate = 'frmData.Rate_' + IDField + '.value';
var RateVal = eval(Rate);

var Total = (UnitQtyVal * RateVal);
document.frmData["Amount_"+IDField].value = (Total.toFixed(2));
}
<!-- End
</script>


Form snippet:
<tr>
<td><cfinput type="Text" name="UnitQty_#WorkOrderID#" value="#DecimalFormat(UnitQty)#" required="Yes" size="5" message="Unit Qty is required." onKeyup="DoMath(#WorkOrderID#)"></td>
<td><cfinput type="Text" name="Unit_#WorkOrderID#" value="#Unit#" required="Yes" size="10" message="Unit is required."></td>
<td><cfinput type="Text" name="Rate_#WorkOrderID#" value="#Rate#" required="Yes" size="5" message="Rate is required." onKeyup="DoMath(#WorkOrderID#)"></td>
<td><cfinput type="Text" name="Amount_#WorkOrderID#" value="#DecimalFormat(ProcessCost)#" required="Yes" size="10" message="Total is required."></td>
</tr>










privacy (GDPR)