Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jun 2002
    Location
    Olathe, KS
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Plano, Texas
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #3
    New Coder
    Join Date
    Jul 2002
    Posts
    56
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up 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>

  • #4
    New Coder
    Join Date
    Jul 2002
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #5
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •