Web Analytics Made Easy - StatCounter Need to Calculate Fields on a Form with Javascript - CodingForum

Announcement

Collapse
No announcement yet.

Need to Calculate Fields on a Form with Javascript

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    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.
    Tags: None
  • #2
    Code:
    <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>
    House Of Proctor Genealogy

    Comment

    • #3
      Re: Need to Calculate Fields on a Form with Javascript

      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>

      Comment

      • #4
        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.

        Comment

        • #5
          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

          Code:
          <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>

          Comment

          Previous template Next
          Working...
          X