Skip to main content
B
BACFL
Inspiring
May 23, 2011
Answered

CFinput auto calculate numeric fields onchange

  • May 23, 2011
  • 3 replies
  • 2842 views

I am trying to use CFinput to automatically update input fields as numbers are changed in one field.

EX:

A: Cost field changed from 0 to 15,00 by user (onkeyup used perhaps?)

B: Tax field Needs to auto calculate to 15.00 x .10

C: Total cost field has to change to A + B = C or $16.50.

These should all be input fields and automatically change when the Cost field is updated.

Thank you in advance and let me know if you need more information.

This topic has been closed for replies.
Correct answer

Ok...let's try it on the client side... <cfwild />

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
<script language="javascript">
    function getValues(val){

        var numVal1=parseInt(document.getElementById("one").value);

        var numVal2 = numVal1 * 0.10;
        var tax = numVal2.toFixed(2);
        document.getElementById("two").value = tax;

        var numVal3 = numVal1 + numVal2;
        var totalCost = numVal3.toFixed(2);
        document.getElementById("three").value = totalCost;
    }
</script>
<style>
input.numbox{
    width:40px;
    height:20px;
}
</style>

</head>

<body>

Cost:
<input class="numbox" type="text" id="one" value="0.00" onkeyup="getValues(1)" /><br/>
Tax:
<input class="numbox" type="text" id="two" value="0.00" /><br/>
Total Cost:
<input class="numbox" type="text" id="three" value="0.00" /><br/>

</body>
</html>

3 replies

A
Anonymous
Correct answer
May 26, 2011

Ok...let's try it on the client side... <cfwild />

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
<script language="javascript">
    function getValues(val){

        var numVal1=parseInt(document.getElementById("one").value);

        var numVal2 = numVal1 * 0.10;
        var tax = numVal2.toFixed(2);
        document.getElementById("two").value = tax;

        var numVal3 = numVal1 + numVal2;
        var totalCost = numVal3.toFixed(2);
        document.getElementById("three").value = totalCost;
    }
</script>
<style>
input.numbox{
    width:40px;
    height:20px;
}
</style>

</head>

<body>

Cost:
<input class="numbox" type="text" id="one" value="0.00" onkeyup="getValues(1)" /><br/>
Tax:
<input class="numbox" type="text" id="two" value="0.00" /><br/>
Total Cost:
<input class="numbox" type="text" id="three" value="0.00" /><br/>

</body>
</html>

A
Anonymous
May 25, 2011

Hi,

Save the first group of code as one.cfm.  Save the second group of code as one.cfc.  It should do what you're looking for, but depending on what you're trying to do, there are many other approaches.

<cfwild />

--------------------------------

one.cfm

------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
</head>

<body>

<cfform method="post" action="two.cfm">
    <cfinput
        type="text"
        name="cost"
        value="0.00"
        style="text-align:right; width:50px;"/> <br>
    <cfinput
        type="text"
        name="tax"
        value="tax" 
        style="text-align:right; width:50px;"
        bind="cfc:one.getTax({cost@change})"
        bindonLoad="true"/> <br>
    <cfinput
        type="text"
        name="totalcost"
        value="totalcost" 
        style="text-align:right; width:50px;"
        bind="cfc:one.getTotalCost({cost@change})"
        bindonLoad="true" />    
</cfform>

</body>
</html>

---------------------------------------------------------------

one.cfc

---------------------

<cfcomponent output="false">

    <cffunction name="getTax" access="remote">
        <cfargument name="cost" required="true" type="string">
        <cfset tax = ARGUMENTS.cost * .10 />
        <cfset tax = dollarformat(tax)/>
        <cfreturn tax>
    </cffunction>
   
    <cffunction name="getTotalCost" access="remote">
        <cfargument name="cost" required="true" type="string">
        <cfset totalcost = (ARGUMENTS.cost + (ARGUMENTS.cost * .10)) />
        <cfset totalcost = dollarformat(totalcost)/>
        <cfreturn totalcost>
    </cffunction>
   
</cfcomponent>

A
Adam Cameron.
Inspiring
May 25, 2011
It should do what you're looking for, but depending on what you're trying to do, there are many other approaches.

Whilst this is true, and it's good to have options, I think suggesting to go back to the CF server to perform a simple arithmetic calculation when all the relevant data are on the client already is a poor one.

To the OP: which part of doing this with JavaScript is eluding you?

--

Adam

D
Dan_Bracuk
Inspiring
May 23, 2011

You know you will have to write your own javascript for this, right?

B
BACFLAuthor
Inspiring
May 23, 2011

I was hoping there was a cold fusion function to handle the calculations.  However, if not, any chance of getting the javascript as well?

Thanks!

B.

D
Dan_Bracuk
Inspiring
May 23, 2011

I learned Javascript by buying the book, Teach Yourself Javascript in 24 Hours.  If you don't want to buy a book, webmonkey.com has an online set of tutorials.  I don't know how good they are, but I know they're there.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices