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

Question

Question

Calculate Totals based on selection from drop down

asked on October 29, 2015

I am creating an expense report form and I need to calculate totals for different expenses which are listed in a drop down box.  The user will input the total amount of the transaction and then select what type of expense it is from the drop down.  I then need to display the total for each type of transaction at the bottom of the form.  

 

Can someone please help me with this?

Thanks,

Dane

Expense Report.JPG
0 0

Answer

SELECTED ANSWER
replied on October 30, 2015 Show version history

Hi Dane,

You can use custom Javascript to look at each 'Amount' value, check to see which 'Type' is selected in that row, and add like 'Types' together into your 'Totals' fields. Here is one way of achieving that:

$(document).ready(function(){
  
  $('form').click(function(){
    
    var hotel = 0, airfare = 0, carrental = 0, gas = 0, meals = 0, grocery = 0;
    var amount = '[id^=Field5\\(]';
    var type = 'select[id^=Field6\\(]';
    
    $(amount).each(function(){
      
      var index = $(amount).index(this);
      
      if ($(type).eq(index).val() == 'Hotel'){hotel += parseFloat($(this).val());}
      else if ($(type).eq(index).val() == 'Airfare'){airfare += parseFloat($(this).val());}
      else if ($(type).eq(index).val() == 'Car Rental'){carrental += parseFloat($(this).val());}
      else if ($(type).eq(index).val() == 'Gas'){gas += parseFloat($(this).val());}
      else if ($(type).eq(index).val() == 'Meals'){meals += parseFloat($(this).val());}
      else if ($(type).eq(index).val() == 'Grocery'){grocery += parseFloat($(this).val());}
      
    });
    
    $('.hotel input').val(hotel);
    $('.airfare input').val(airfare);
    $('.carrental input').val(carrental);
    $('.gas input').val(gas);
    $('.meals input').val(meals);
    $('.grocery input').val(grocery);
  });
  
  function parseNumber(n) {
    
    var f = parseFloat(n); //Convert to float number.
    
    return isNaN(f) ? 0 : f; //treat invalid input as 0;
  }
});

You can copy and paste this into your Javascript section on the 'CSS and Javascript' tab.

In the code, replace the value of 'amount' (line 6) with your amount column's selector (see below).

For instance, if your Amount id="q21", your selector would be '[id^=Field21\\(]'

The same goes for the variable 'Type' (line 7).  Change '6' to whichever id number your 'Type' column is.

Finally, go to the 'Advanced' tab for each of your single-line fields and enter the field's name into the 'CSS class' section. For instance, my 'Car Rental' css class is 'carrental'.

Let me know if this works for you or if you have any questions along the way!

0 0

Replies

replied on November 4, 2015

Thanks! Works great

0 0
replied on September 7, 2017

Is there a way to test or troubleshoot this method?  I have created the fields, added the CSS and posted the javascript.  However, I do not get any totals when I add rows with amounts.  

0 0
replied on December 26, 2018 Show version history

Hi,

Thank you so much, I found this post very helpful.

I would like to ask though how I can include a second calculation that will work out the total of two variables and post that value to a totals field. I have tried some code but it is not working.

Here is my code:

$(document).ready(function(){
  
  $('.CalcInput').on('blur', 'input', calctotal);
  
  $('form').click(function(){
    
    var nonsaleable = 0, shortload = 0, saleable = 0, s = 0;
    var amount = '[id^=Field205\\(]';
    var type = 'select[id^=Field227\\(]';
    
    $(amount).each(function(){
      
      var index = $(amount).index(this);
      
      if ($(type).eq(index).val() == '52_Damaged_Non_Saleable'|| $(type).eq(index).val() == '55_Route_Bulk_Damaged'|| $(type).eq(index).val() == '60_Expired_Non_Saleable'){nonsaleable += parseFloat($(this).val());}
      else if ($(type).eq(index).val() == '54_Short_Load'){shortload += parseFloat($(this).val());}
      else if ($(type).eq(index).val() == '66_Saleable'|| $(type).eq(index).val() == '70_Route_Bulk_Saleable'){saleable += parseFloat($(this).val());}

    });
    
    $('.nonsaleable input').val(nonsaleable);
    $('.shortload input').val(shortload);
    $('.saleable input').val(saleable);
    

  });
  
  function calctotal() {
      var s = parseNumber($('.nonsaleable input').val())+parseNumber($('.saleable input').val());
      $('.totalreturns input').val(s);
  }
  
  function parseNumber(n) {
    
    var f = parseFloat(n); //Convert to float number.
    
    return isNaN(f) ? False : f; //treat invalid input as 0;
  }
  
});

I need to add these two values;

$('.nonsaleable input').val(nonsaleable); and  $('.saleable input').val(saleable);

and post the value to a total returns field with class .totalreturns

Thank you for the assistance.

 

 

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

Sign in to reply to this post.