Question

Ok, considering the regular expressions aren’t working properly and there are no errors, I’m going to try and use the money mask.

The goal is still to only allow numeric characters and a decimal. With maskMoney, that does the work for you.

Also, I need to be able to successfully calculate each cell.

As of right now, the masks are working good, but I’m no longer able to calculate. This is where I’m troubled.

JQuery and JavaScript code:

---

<script type="text/javascript" language="javascript">
    $(document).ready(function(){
     $('.date').mask("99/99/9999");
     $('.account').mask("99-9-999999-9999");
     /*calcuating the vertical and horizontal inputs*/

     $('.R26').attr("disabled", "disabled");

 $('.calc').maskMoney({symbol: ""});
 $('.R25').unmaskMoney();
 $('.R18').unmaskMoney();

 $('input.description').focus(function(){
  if($(this).val()=="Enter text here"){
   $(this).val(" ");
  }

  else{
   $(this).val($(this).val());
  }
 });
 $('input.description').blur(function(){
  if($(this).val()==" "){
   $(this).val("Enter text here");
  }    
 });

$('.calc').keyup(function(){
 var classArray = $(this).attr('class').split(' ');
 //Personal gas expense
 $('.gasamount').sum("change", "#totals4");
 var num = $(this).attr("id").replace(/[A-Za-z$,-]/g, "");
 $('#gasmoney'+num).val(<cfoutput>#mileage#</cfoutput> * $(this).val());
 $('.gasmoney').sum("change", "#totals5");
 //////////////////////

 //Sum of each cell
 $.each(classArray, function(){
  $('.'+this).sum("change", ".ttl"+this);
 });
 //Finding the grandtotal
 var grandTotal = $('.row26').parent().children('td:last').children('input');
 var sum = $('.row25').parent().children('td').children('.calc').sum();
 grandTotal.val(Number(sum).toFixed(2));
});

ColdFusion and HTML code:

#labels[r]#

<cfloop from="1" to="7" index="i">

 <td id="Day#i#" class="row#r# col#i#">
  <cfif r EQ 1>#Left(DayOfWeekAsString(i),3)#<cfelse><cfif r EQ 2>
  <input type="text" class="date-mask" /><cfelse>
  <input type="text" 
  <cfif labels[r] EQ "Personal Car: Mileage ##"> id="gasamount#i#" <cfelseif labels[r] EQ "Personal Car: Mileage $">id="gasmoney#i#" </cfif><cfif labels[r] EQ "Daily Totals">id="dailytotals#i#"</cfif>
   class="<cfif labels[r] EQ "Personal Car: Mileage ##">gasamount<cfelse><cfif labels[r] NEQ "Daily Totals">C#i#</cfif></cfif>
   <cfif labels[r] EQ "Personal Car: Mileage $">gasmoney<cfelse>calc R#r#</cfif>
   <cfif labels[r] EQ "Daily Totals">ttlC#i#</cfif>"
    <cfif labels[r] EQ "Daily Totals" OR labels[r] EQ "Personal Car: Mileage $">readonly="readonly"</cfif>
     /></cfif>
     </cfif>
 </td>


</cfloop>

 <td class="totals"><cfif r EQ 1>Total<cfelse><input type="text" id="totals" class="ttlR#r#" readonly="readonly" /></cfif></td>

I’ve had similar questions with the same application, but this is in fact not a duplicate(in case you think it is.).

The ‘.’+this is an object created by the array. I used cfloops to create a large table, and added multiple classes. Had to break up the multiple classes into an array, and then was able to select each class as its own.

Answer 1

Ok. So I figured it out on my own.

Using the maskMoney(), I am able to control what characters are entered and still able to correctly calculate the table.

All I had to do to fix the calculations was to unmask the .gasamount:

                $('.gasamount').unmaskMoney();

This is what fixed the calculation problems. ^^ The mask was causing problems for the total of the 2 rows and those 2 rows caused the calculations to break.

---

                $('.calc').maskMoney({symbol: ""});
                $('.R25').unmaskMoney();
                $('.R18').unmaskMoney();

            $('.calc').keyup(function(){
                var classArray = $(this).attr('class').split(' ');
                //Personal gas expense
                $('.gasamount').sum("change", "#totals4");
                var num = $(this).attr("id").replace(/[A-Za-z$,-]/g, "");
                $('#gasmoney'+num).val(<cfoutput>#mileage#</cfoutput> * $(this).val());
                $('.gasmoney').sum("change", "#totals5");
                //////////////////////

                //Sum of each cell
                $.each(classArray, function(){
                    $('.'+this).sum("change", ".ttl"+this);
                });
                //Finding the grandtotal
                var grandTotal = $('.row26').parent().children('td:last').children('input');
                var sum = $('.row25').parent().children('td').children('.calc').sum();
                grandTotal.val(Number(sum).toFixed(2));
            });

Everyone that tried to help, thank you for taking the time!

If anyone would like to use this example or the code for future applications, feel free to comment and let me know and I can setup a different page with an example and instructions and the source.