Simple math tricks with ColdFusion 8 Ajax tags

This post is more than 2 years old.

A reader yesterday asked me an interesting question. Using ColdFusion 8 and bindings, is it possible to do simple mathematics? For example, he wanted something like this:

<input type="text" name="res" bind="{field1}*{field2}">

While that isn't possible, you can do it using cfajaxproxy. (Oh my sweet cfajaxproxy - is there anything you cannot do???) Consider the following example:

<cfajaxproxy bind="javascript:doMultiply({first},{second})" /> <script> function doMultiply(x,y) { document.getElementById("result").value = x*y; } </script>

<form> <input id="first" size="3"> X <input id="second" size="3"> = <input id="result">

</form>

The form has 3 fields. The first two are for the numbers I'll be multiplying. The last field is for the result. I use the cfajaxproxy tag to bind to the first two fields. I run the JavaScript function, doMultiply, whenever first or second changes. And that's it! I should probably add a check to see if x and y are numeric, but you get the idea.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Chad posted on 2/21/2008 at 8:30 PM

This week i have heard a lot of praise about CFAjaxProxy so i looked it up in the docs and i am really impressed.

To tie an asynchronous connection to a CFC is SO COOL!

Looks like you have to brush up on your Javascript skills to use it to the fullest, but that is not a big hurdle.

I am going to take my CF8 upgrade request back down to the CFO and see if i can get my servers upgraded.

Comment 2 by Dan G. Switzer, II posted on 2/21/2008 at 9:29 PM

Yesterday I posted a video on my blog of a jQuery Calculation Plug-in I've been toying with in my free time:

http://blog.pengoworks.com/...

It allows you to easily build dynamic calculations to your pages.

While it's not CF-specific, jQuery is very easy to get started with.

Comment 3 by Dan Sorensen posted on 2/21/2008 at 10:11 PM

Way cool Ray! :-)

I was looking for a way to do that this week. Thanks for the tip. :-)

Comment 4 by Christopher Walker posted on 2/25/2008 at 9:32 PM

That little trick works well an I put it to work.

Here is something I've been banging my head against a wall about lately. This is easy I'm sure but I'm bogged down with my own head cold I can't figure it out.

If I start with a number that is a ceiling, say 2500, is there a way to get cfajaxproxy to limit the two boxes to the sum of 2500. for example in box 1 as I start typing numbers the box 2 would dynamically change to the difference of what is being typed into box 1 from the ceiling of 2500.

Comment 5 by Raymond Camden posted on 2/25/2008 at 9:38 PM

That's just different math. Instead of a = x+y, it's y = 2500-x. Where x and y are the two boxes, and A is the result. You wouldn't need a 3rd box actually, just the two.

Comment 6 by Joshua Hublar posted on 2/26/2008 at 3:40 PM

/Very/ interesting.

Comment 7 by David Wilson Brown posted on 2/28/2008 at 1:33 AM

Dare I ask if anything can be done to utilize this trick in a Flash format Form?

Comment 8 by Raymond Camden posted on 2/28/2008 at 1:34 AM

BLASPHEME!

THOU SHALT NOT SPEAK OF THE FLASH FORM!!

Comment 9 by David Wilson Brown posted on 2/28/2008 at 1:36 AM

Yikes!

Guess i'm barking up the wrong format ;-)

Comment 10 by Christopher Walker posted on 2/28/2008 at 1:58 AM

Here is a challenge. The following code works perfectly, but the 'result' box doesn't change until the focus is taken out of the textbox you are changing. I though onKeyPress would fix that but it doesn't. Any ideas?

<cfajaxproxy bind="javascript:doMultiply({first},{second})" />
<script>
function doMultiply(x,y) {
document.getElementById("result").value = x*y;
}
</script>

<form>
<input id="first" size="3" onKeyPress="javascript:doMultiply();"> X <input id="second" size="3" onKeyPress="javascript:doMultiply();"> = <input id="result">

</form>

Comment 11 by Raymond Camden posted on 2/28/2008 at 2:04 AM

Change line 1 to

<cfajaxproxy bind="javascript:doMultiply({first@keyup},{second@keyup})" />

Comment 12 by John Jackson posted on 6/20/2008 at 8:47 PM

If you want to do the binding math in a Flash Form (which is easier IMHO), here are some examples:
<cfinput type="text" label="Total: " name="field4" size="7" height="20" bind="{Math.round((Number(formname. field1) + Number(formname. field2) + Number(formname. field3)))}" >
Or
<cfinput type="text" label="LTV: % " name=" field11" size="17" height="20" bind="{Math.round((formname. field10/ formname. field9) * 100)}"