Javascript multiplication w/value stored in another cell.

Question

---

Update: Final Fix:

  $('.gasamount').sum();
  var num = $(this).attr("id").replace(/[A-Za-z$,-]/g, "");
  $('#gasmoney'+num).val(<cfoutput>#mileage#</cfoutput> * $(this).val());
  $('.gasmoney').sum();

---

What I've been trying to accomplish:

• Create a set value for a row of cells.
• Multiply the user's value by a stored amount.
• Get that result and display the value in the cell directly below it in the next row.

I can't seem to get this to work. Every time I think I'm close I'm returning objects or an undefined value.

Javascript

---

 $('.calc').change(function(){
  var classArray = $(this).attr('class').split(' ');

  $.each(classArray, function(){

   var totalsum = $('.'+this).sum();
   $('.ttl'+this).val(Number(totalsum).toFixed(2));

   var gas = $('.gasamount4');
   var gasAmt = gas.val() * <cfoutput>#mileage#</cfoutput>;
   var gasTot = $('gasmoney4').val(gasAmt);
   gasTot;
   alert(gasTot);
  });

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

---

  <cfloop from="1" to="#ArrayLen(labels)#" index="r">
  <tr>
   <td class="labels"><cfif ArrayIsDefined(labels,r) AND labels[r] NEQ "Open">#labels[r]#</cfif></td>
   <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" class="calc <cfif labels[r] EQ "Personal Car: Mileage ##">gasamount#i# </cfif> <cfif labels[r] EQ "Personal Car: Mileage $">gasmoney#i# </cfif><cfif labels[r] EQ "Daily Totals">ttlC#i#<cfelse>R#r# C#i#</cfif><cfif labels[r] EQ "Grand Total">gTtl#r#</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" class="ttlR#r#" readonly="readonly" /></cfif></td>
  </tr>
  </cfloop>

If something wasn't made clear, just ask and I'll do my best to provide any additional information. Thanks.

Answer 1

From the code, I speculate that you want to take the number in each cell of the "Personal Car Mileage #" row, multiply it by the user's mileage rate, and put the result in the corresponding cell in the "Personal Car Mileage $" row.

Try this:

$('input.R4').change(function () {
    var val = this.value,
    cell = this.className.match(/C\d+/)[0];

    val = parseInt(val, 10);
    val *= <cfoutput>#mileage#</cfoutput>;
    $('td.row5 input.' + cell)[0].value = val.toFixed(2);
});

Edit:

$('input.R4') should be selecting every input element with a class of "R4", so this will be every input element on the "Personal Car Mileage #" row.

The "cell" variable (poorly named, in retrospect) captures the column of the cell that just changed. So, if you change the first input box, this will be "C1".

Ergo, $('td.row5 input.C1') will then capture the input with class "C1" in the fifth row of the table (the "Personal Car Mileage $" row), and set its value to the computed amount.

So, it should already be working for each cell in the row. This is possible because you've given your rows, cells, and input elements helpful class names--but take care, numeric values may be subject to change at some later date. If somebody after you inserts a new row into the table, thus throwing off the numbers, this code is likely to break.

You're on the right track by adding "gasamountX" and "gasmoneyX" to these things, but I think you should take the numbers off them. If you do, you can change the code to:

$('input.gasamount').change(function () {
    var val = this.value,
    column = this.className.match(/C\d+/)[0];

    val = parseInt(val, 10);
    val *= <cfoutput>#mileage#</cfoutput>;
    $('input.gasmoney.' + column)[0].value = val.toFixed(2);
});

Make sense?