CFinput auto calculate numeric fields onchange

Report · May 23, 2011

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.

Report · May 23, 2011

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

Report · 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.

Report · 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.

Report · May 23, 2011

Dan,

Thanks for the info. It looks like Flash forms are going to do the trick!

B.

Report · May 23, 2011

I would strongly recommend that you do this in JavaScript instead. Flash Forms are not a good thing - they don't perform well, they're not accessible, etc, etc.

Dave Watts, CTO, Fig Leaf Software

http://www.figleaf.com/

http://training.figleaf.com/

Dave Watts, Eidolon LLC

Report · May 23, 2011

What do you mean by "not accessible"?

Thanks.

Report · May 23, 2011

By default, they don't conform to web accessibility standards. But in general, even if they did, I'd recommend against their use.

Dave Watts, CTO, Fig Leaf Software

http://www.figleaf.com/

http://training.figleaf.com/

Dave Watts, Eidolon LLC

Report · May 23, 2011

Web standards aside: no one with an iPhone or iPad will be able to use them, and a some other people will have Flash blocked as a matter of course.

I'd limit Flash usage to ancillary stuff that's not necessary for the webite.

What you're asking to do is relatively easy to do with mark-up & JS, and will be no harder to do that way that with Flash forms (and will be a much better user experience than doing it with Flash would be). However you will need to teach yourself how to do it. There will be an abundance of resources on the web covering your requirements.

--

Adam

Report · May 24, 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.

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

one.cfm

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

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

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

<body>

</body>
</html>

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

one.cfc

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

Report · 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

Report · May 25, 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>

CFinput auto calculate numeric fields onchange

1 Correct answer

li.media.uploader-dialog.title