Question

Javascript table row question

Forms

Updated December 17, 2018

asked on December 17, 2018

So I am pretty new to Javascript and trying to get a sales tax item to work for us.

I have things working great but was going the easy route and having just single fields. Essentially I have a amount I type in. If the Tax dropdown is nothing, the Tots field shows the total. If I select MN for Tax, javascript calculates the tax and adds it up.

For example, no tax shows:

Flipping to MN shows:

This works great. However for line items we need these 3 fields in a table where they can add as many rows as possible. They enter the amount but some lines are taxed and others not. Any idea as to how I would modify this code to fit into a table?

$("#Field147").on('change',function(){
CalcTax();
});
//Call CalcTax function when Tax field changed.  
  
  
$("#Field148").on('change',function(){
CalcTax();
});
//Call CalcTax function when Currency field changed.  
  
   function round(number, places) {
   number = parseFloat(number, 10);
   var e  = parseInt(places || 2, 10);
   var m = Math.pow(10, e);
   return Math.floor(number * m) / m;
};
  

 function CalcTax(){
    var tax = 0.07125;
    var totaltax = 0.00;
    var grandtotal = 0.00;
    var subtotal = parseFloat($("#Field148").val());
   
    if($("#Field147").val() == "MN")
    {
    totaltax = subtotal * tax;
	grandtotal = round(totaltax + subtotal);
    $("#Field149").val(grandtotal);
    } 
   else {
      grandtotal = round(subtotal);
      $("#Field149").val(grandtotal);
    }
  };

Thanks,

Chris

0 0

Replies

replied on December 17, 2018

Have you tried using Functions instead of JavaScript?

You should be able to perform the same calculations with Functions, and you can use the INDEX(Table.Column1,ROW()) Function so it will automatically calculate based on the columns in the same row.

It can be done with JavaScript, but, the problem you're going to run into is that you'll need to reassign your event handlers every time users add a new row.

For example, if the table starts with 1 row and your handlers are assigned on document ready, then the user-added rows didn't exist yet and won't have a change event attached.

1 0

View 3 previous replies

replied on December 17, 2018

Ok, thanks Jason. If it is possible to do with the out of the box functions I'll go that way. The Javascript part was easy enough but if I can do the ifs and such with the index then I'll start testing. Appreciate the info.

0 0

replied on December 17, 2018

It should be possible with built-in functions, it just gets a bit messy because of how you need to do the IF functions. I would build it out one piece at a time so you can test it as you go. I always run into some random issue when I try to build a big complex function all at once.

If it makes things easier, you could also add a hidden column to the table and use that field to handle part of the calculation. I've done that before just so I don't have to deal with a single massive function.

0 0

replied on December 17, 2018 • Show version history

Trying to do it a piece at a time. On the field in the row that is going to hold the total tax I have the following formula:

=IF(code.Tax_Gr="MN",1,10)

This puts a 1 if MN or a 10 if not and seems to work. Then I tried:

=IF(INDEX(code.Tax_Gr="MN",ROW()), INDEX(1,ROW()),INDEX(10,ROW()))

and we get nothing. Have not got to the product part, just looking to validate the if rules and see if it works in a table.

Edit - seems to, had to switch it around a bit: =IF(INDEX(code.Tax_Gr,ROW())="MN",1,10)

0 0

replied on December 17, 2018

Yea, the INDEX function is only necessary when referencing a value in a table column. If you're using a static value, like you are for the 1 and 10 in your example, or a single value field, you can reference them directly.

The index function works like an index in a JavaScript array, so thinking about it like that should help things feel more familiar. The ROW() function references the current row of the table, so if you wanted to reference a static row you could put a fixed value there as well.

0 0

replied on December 17, 2018

Got it to work in the built in function. For those that may find the post later and are trying to do the same thing:

=IF(INDEX(code.Tax_Gr,ROW())="MN",PRODUCT(0.07125,INDEX(code.Pre_tax,ROW())),0)

TAX Gr is my dropdown, Pre tax is a currency field that the user enters.

If they do not select MN from the dropdown it puts 0. I have another field totaling up the line as well.

On a somewhat related note, I have a total field outside the table that is totaling up all the 'totals' of each row. I have different tables on the form as some invoices use certain rows and others do not. So, I have my table range not starting at 1 but at 0 (for cleaner look and required fields stuff).

When the form loads, things are good.

However, if I add a row (not typing in anything), the total updates to 0 (which is good). Then if I remove the row:

Using the IF in the built in functions, anyone know how to check for "at least one row" or "row exists?

Current formula on the total is simply SUM(table.total). Would like to add something like IF("Row Exists", SUM(table.total),0)

0 0

replied on December 17, 2018 • Show version history

I think the better solution is to set a minimum of 1 rows. If there is a situation in which the user would have no values to enter, it might make more sense to include a radio or dropdown attached to a field rule that would hide the table entirely.

Otherwise, the following should work

IF(table.total<>"", SUM(table.total),0)

0 0

replied on December 17, 2018 • Show version history

I would add the check for state into the calculation of the tax, that way I can call it with impunity for each row.

$('.tableClass').on('change', '.amount input, .state select', function() {
  $('.tableClass tbody tr').each(function() {

    let amount = $(this).find('.amount input').val();
    let state = $(this).find('.state select').val();

    $(this).find('.total input').val(CalcTax(amount, state)).change();
  });

});

function CalcTax(amount, state) {

  if (state != 'MN')
    return amount;

  var tax = 0.07125;
  var totaltax = 0.00;
  var grandtotal = 0.00;
  var subtotal = parseFloat(amount);

  var totaltax = subtotal * tax;
  var grandtotal = round(totaltax + subtotal);

  return grandtotal;

};

0 0

You are not allowed to follow up in this post.

Question

Question

Javascript table row question

Replies

Sign in to reply to this post.