You are viewing limited content. For full access, please sign in.

Question

Question

Simple Multiplication in a Table

asked on July 31, 2015

Hello.

I'm doing a simple mileage reimbursement table that needs to multiply the miles traveled by the reimbursement rate (in this example it's 0.575) and then calculate the total for each item.

We then would like the table to have the total miles calculated and total reimbursement amount calculated for the entire table.

Thanks for your help!

0 0

Answer

SELECTED ANSWER
replied on July 31, 2015

Here is a generic form layout with the fields and their CSS classes:

Here's the Javascript:

$(document).ready(function () {
  
  $('.read-only input').attr('readonly',true);
  
  $('.milestable').on('change', 'input', sumtotal);
  
  $('.milestable').on('click', '.form-del-field', sumtotal);

  function sumtotal() {
    var msum = 0;
    var rsum = 0;
    var x = 0.575;
    $('.cf-table-block tbody tr').each(function () {
      var s = 0;
      $(this).find('.milessum input').each(function () {
        s += parseNumber($(this).val());
      });
      var r = s * x;
      $(this).find('.reimbursementsum input').val((r).toFixed(2));
      msum += s;
      rsum += parseNumber((r).toFixed(2));
    });
    $('.totalmiles input').val(msum);
    $('.reimbursementtotal input').val((rsum).toFixed(2));
  }
  
  function parseNumber(n) {
    var f = parseFloat(n); //Convert to float number.
    return isNaN(f) ? 0 : f; //treat invalid input as 0;
  }  
  
  $('.cf-table-add-row').click(function () {
    $('.read-only input').attr('readonly',true);
  });
  
});

And here's a sample form submission:

1 0
replied on August 3, 2015 Show version history

Hi Alexander,

That's amazing, thank you!

For some reason it's not calculating for me. I wonder if it's the class names I'm using?

Miles Traveled CSS class = milessum

Reimbursement Amount CSS class = read-only reimbursement

Total Miles CSS class = read-only totalmiles

Reimbursement Total  CSS class = read-only reimbursementtotal

 

 

 

 

0 0
replied on August 3, 2015

The "Reimbursement Amount" field in the table uses the CSS class, read-only reimbursementsum

1 0
replied on August 3, 2015

Hmm, still not working. Is there any screenshots I can show you that might help?

Here's the code copied in.
 

And here is the table view

 

0 0
replied on August 3, 2015

Make sure that you also add a CSS class to the table itself. In my example, I use milestable.

0 0
replied on August 3, 2015

Still didn't work, is there something else I might be doing wrong?

0 0
replied on August 3, 2015 Show version history

On the very first line of your Javascript, right before

$(document).ready(function () {

you have 

01

which will break things. Remove those extraneous characters.

1 0
replied on August 3, 2015

It worked! Thank you so much!

0 0

Replies

replied on July 31, 2015

I've had to pivot gears on this, because I don't think that what I wanted to do would be good long term, with the mileage rate will change every year.

What I've done is created a table that needs to calculate the reimbursement amount based off of the miles traveled multiplied by 0.575.

I've created a hidden field with the default value set at 0.575.

I then need to have a total miles field that calculates the total miles column and I need the reimbursement total calculated.

 

I'm at a loss on this one. Any help would be really appreciated!

0 0
replied on July 31, 2015 Show version history

See the Javascript example solution posted in this thread. While the scenario isn't exactly the same, you should be able to make a few minor changes to fit your needs.

0 1
You are not allowed to follow up in this post.

Sign in to reply to this post.