Forms - adding two fields (how?)

[HappyHour-SC]

I have been programming in CF for a long time but for some reason, I haven't been asked to do this..  I have a form that has two fields - Food Total and Drink Total..  when the user enters the Price of total food and Total drink, have the total automatically fill in the Input field of Alltotal.

This is done on a Form.  I don't want them to press submit to show total.  I need it to show up automatically.

[existdissolve]

This one's easy.

You should check the docs: ColdFusion has stuff built into it that will make this short work.

And more importantly, Google is your friend.  Searching for something like "coldfusion bind form fields" brings up a billion results that specify exactly how to do this.

[HappyHour-SC]

Thanks... You see, the problem was I didn't know the term "Bind".  I googled everything but

didn't realize that was the expression.  It works, at least auto populates the total field with both variables. In other words, I put in 10.00 and 30. and it shows 10.0030.   I need to figure out how to sum this with bind.

[HappyHour-SC]

OK... I've read about 40 pages and cannot find how to ADD the BIND statements of two fields to equal Total.

Any help would be Greatly appreciated...

[JR__Bob__Dobbs]

Can you post the code that you've tried?

[HappyHour-SC]

It's a simple form.  I just need to add the sum(food+drink) but I cannot get it to work.

                  <CFFORM ACTION="foodtotals

.cfm" METHOD="POST">

                                
                 
                               
                 <TABLE BORDER=0 CELLPADDING=0 width="100%">
                
                 <TR><TD>
                    <table cellspacing="0" cellpadding="0" border="0" width="100%">
                        <tr>
                           <td align="right"><font face="Verdana,Geneva,Arial,Helvetica,sans-serif" size="2" color="white">How many in Party:</Font></td>
                           <td> <CFINPUT TYPE="text" NAME="party" required="Yes" SIZE="3" MAXLENGTH="3"></td>
                         
                          </tr>
              
                         <tr>
                           <td align="right"><font face="Verdana,Geneva,Arial,Helvetica,sans-serif" size="2" color="white">Food Sales:</Font></td>
                           <td> <cfinput type="text" name="foodsales" value="0.00" size="7" maxlength="7"></td>
                         
                          </tr>
                          <tr>
                           <td align="right"><font face="Verdana,Geneva,Arial,Helvetica,sans-serif" size="2" color="white">Drink Sales:</Font></td>
                           <td> <cfinput type="text" name="drinksales" value="0.00" size="7" maxlength="7"></td>
                          </tr>
                         
                                     
                          <tr>
                           <td align="right"><font face="Verdana,Geneva,Arial,Helvetica,sans-serif" size="2" color="white">Total Bill: $</Font></td>
                           <td> <CFINPUT TYPE="text"  NAME="totalbill" bind="{foodsales}+{drinksales}" SIZE="7" required="Yes"  MAXLENGTH="7">

<font face="Verdana,Geneva,Arial,Helvetica,sans-serif" size="1" color="white"> (without Taxes/Tip)</font></td>
                         
                          </tr></table>      
                    </TD></TR>    
                   </TABLE>
               <br>
               <CENTER><INPUT TYPE="submit" VALUE="Thank you!"></CENTER>
               </CFFORM>
 
 
 

[JR__Bob__Dobbs]

It looks like the use of bind{} is primarily focused on binding string data.  You can write some Javascript to use bind to meet your needs.

Here is a blog post on the topic from Ray Camden that I used a model.
http://www.coldfusionjedi.com/index.cfm/2008/2/21/Simple-math-tricks-with-ColdFusion-8-Ajax-tags

<script type="text/javascript">
    function calculateAndDisplaySum(item1, item2)
    {
        if(parseFloat(item1) != NaN && parseFloat(item2) != NaN)
        {
            document.getElementById("totalbill").value = parseFloat(item1) + parseFloat(item2);
        }
        else
        {
            document.getElementById("totalbill").value = "";
        }
    }
</script>

<cfajaxproxy bind="javascript:calculateAndDisplaySum({drinksales},{foodsales})" />

<cfform action="test.cfm" method="post">

Food Sales <cfinput type="text" name="foodsales" value="0.00" size="7" maxlength="7"><br />

Drink Sales <cfinput type="text" name="drinksales" value="0.00" size="7" maxlength="7"><br />

Total <cfinput type="text" name="totalbill" size="7" required="yes" maxlength="7">

</cfform>

You could also take ColdFusion out of this entirely, since the action takes place on the client, and write some Javascript to accomplish this task.

Message was edited by: JR "Bob" Dobbs Corrected formatting issues.

[Adam Cameron.]

You probably want to make sure JS knows the arguments are numeric, not strings.  Use parseInt() or parseFloat() depending on the requirement.

--

Adam

[Dan_Bracuk]

You have to use javascript.  I had a similar job once, but with more fields.  Here are the steps.

When you load your page, put 0 in both inputs.

Write a js function that gets called in the onChange for each input.  The first thing to do is verify that you have a valid number with no more than two decimal places.  If the user puts in anything wrong, put 0 in the entire form field.

Then write another function that runs afterwards.  It will put the sum of the two fields into the 3rd one.  Make sure that field is disabled so the user can't overwrite it.

Hint, don't rely on NaN or parseFloat() for the first function.

[HappyHour-SC]

Guys:  thanks for your help.  This java script worked - KINDA but it does not ADD columns.  The multiplication part works, but when I put the ADD symbol, it joins (binds) the two fields.  I think it has something to do with a TEXT field verse numeric.

All I did was change the x*y  to x+y

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

[Dan_Bracuk]

What happens when input 1 is two and a half bucks and,

you accidentally type a comma instead of a period for your decimal point,

or

you put a dollar sign in front of if?

[HappyHour-SC]

The same happens... if I put the dollar symbol or a comma or anything, it simply adds (joins the fields)..  I cannot believe how nuts this is..

[Dan_Bracuk]

Try those same two tests with multiplication.  You already know that the plus sign is not being interpreted as such.  The intent of these tests is to show what happens when you try to do javascript math with non-numbers.

Or in other words, your solution is very elegent.  Too bad it doesn't work.