11 Replies Latest reply on May 25, 2011 6:46 PM by cfwild

    CFinput auto calculate numeric fields onchange

    BACFL Level 1

      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.

        • 1. Re: CFinput auto calculate numeric fields onchange
          Dan Bracuk Level 5

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

          • 2. Re: CFinput auto calculate numeric fields onchange
            BACFL Level 1

            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.

            • 3. Re: CFinput auto calculate numeric fields onchange
              Dan Bracuk Level 5

              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.

              • 4. Re: CFinput auto calculate numeric fields onchange
                BACFL Level 1

                Dan,

                 

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

                 

                B.

                • 5. Re: CFinput auto calculate numeric fields onchange
                  Dave Watts Adobe Community Professional

                  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/

                  • 6. Re: CFinput auto calculate numeric fields onchange
                    BACFL Level 1

                    What do you mean by "not accessible"?

                     

                    Thanks.

                    • 7. Re: CFinput auto calculate numeric fields onchange
                      Dave Watts Adobe Community Professional

                      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/

                      • 8. Re: CFinput auto calculate numeric fields onchange
                        Adam Cameron. Level 5

                        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

                        • 9. Re: CFinput auto calculate numeric fields onchange
                          cfwild Level 1

                          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>

                          • 10. Re: CFinput auto calculate numeric fields onchange
                            Adam Cameron. Level 5
                            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

                            • 11. Re: CFinput auto calculate numeric fields onchange
                              cfwild Level 1

                              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>