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.
Archived Comments
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.
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.
Way cool Ray! :-)
I was looking for a way to do that this week. Thanks for the tip. :-)
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.
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.
/Very/ interesting.
Dare I ask if anything can be done to utilize this trick in a Flash format Form?
BLASPHEME!
THOU SHALT NOT SPEAK OF THE FLASH FORM!!
Yikes!
Guess i'm barking up the wrong format ;-)
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>
Change line 1 to
<cfajaxproxy bind="javascript:doMultiply({first@keyup},{second@keyup})" />
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)}"