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

Question

Question

add fields on a table based on checkbox/radio button selection

asked on July 21, 2015 Show version history

So what I am trying to do is take the value out of a table currency field and depending on a radio button or check box selection add it to a general fund or federal fund currency field on a separate table.  While doing this take the value of a (not dynamically populated) drop down and put it into a text field to have a query run against it.

Any Help with the direction I am trying to go or the code is appreciated!

And my code so far:

$(document).ready(function() {
  $(document).on('blur change', '.estExpns input', esttotal);
  $(document).on('blur change', '.expns input', calcFunding);
}); 

function parseNumber(n) {
  var f = parseFloat(n); //Convert to float number.
  return isNaN(f) ? 0 : f; //treat invalid input as 0;
};

// Estimated Expenses Summation
function esttotal() {
  var s = 0;
  $('.estExpns input').each(function () {
    s += parseNumber($(this).val());
  });
  $('.estTotal input').val(s);
};

// Calculate funding totals and post processing options based on checkbox values
function calcFunding() {
  var g = 0;
  var d = 0;
  var t = '';
  if ( $('.fundSource input').val('Federal Grant') == true){
  
        $('.expns tbody tr').each(function () {
            tn = $(this).find('.grantName input').val($(this).find('.grantName option:selected').val());
            $('.ttlName input').val(t);
          })
      	// Sum all the federal expenses
        d += parseNumber($('.estExpns input').val());
        $('.fedTotal input').val(d);
      } else {
        // Sum all the general expenses
        g += parseNumber($('.estExpns input').val());
        $('.genTotal input').val(g);
      }
};

Thank you in advance.

0 0

Answer

SELECTED ANSWER
replied on August 10, 2015 Show version history

Hi Kip!

 

I found one solution to totaling items in a table based on their checkbox option:

$(document).ready(function () {
  
    $('.cf-table-block').on('change', 'input', sumtotal);
    function sumtotal() {
      
        var estimate = 0;	// The "Estimate $" value
      	var estimateTotal = 0;	// The total of each "Estimate $" value in the table
      	var federalTotal = 0; 	// The total of each general "Estimate $" value in the table
      	var generalTotal = 0;	// The total of each Federal Grant "Estimate $" value in the table
		
		// Goes through each row in the table
        $('.cf-table-block tbody tr').each(function () {
			
		  // Set the estimate for each row
		  estimate =  parseNumber($(this).find('.sum input').val()); 
		 
		  // Find the checked boxes in each row
		  $(this).find('.checkbox input:checked').each(function () {
			
			// Add estimated value to the General Grant total if checked
			if($(this).val() == "General"){
			  generalTotal += estimate;
			}
			
			// Add estimated value to the Federal Grant total if checked
			if($(this).val() == "Federal_Grant"){
			  federalTotal += estimate;
			}
			
		  });
            
			// Add each row's estimated value to the total
            estimateTotal += estimate;
        });
		
		// Populate totals
        $('.total input').val(estimateTotal);
      	$('.generalTotal input').val(generalTotal);
      	$('.federalTotal input').val(federalTotal);
    }
  
    function parseNumber(n) {
        var f = parseFloat(n); //Convert to float number.
        return isNaN(f) ? 0 : f; //treat invalid input as 0;
    }
});

And here's what my example form looks like: 

This code will go through each row in the table and total the "Estimate $" values into the Estimate $ field (regardless if any checkboxes are checked).  It will also add that Estimate $ to the General Fund if its corresponding checkbox is checked, and/or add to the Federal Grant total if the Federal Grant checkbox is checked. 
For this code to work, I also added CSS classes to the following items:

  • Class sum to the Estimate $ table column.
  • Class checkbox to the Funding Source table column.
  • Class total to the Estimate $ field (outside of the table).
  • Class generalTotal to the General Fund field.
  • Class federalTotal to the Federal Grant field.

 

To add a CSS class to a column in the table, select "Field options" in that field in the table:

Then, go to the "Advanced" tab and enter your class name:

Hopefully this gives you a good starting point for getting the functionality you're looking for.  One difference I noticed was that you had your funds in a table, whereas mine are in individual fields.  By applying the same CSS classes to the table items, you can accomplish the same functionality. 

 

Also, by adding another column and giving it a CSS class, you can modify this code to pull a value from a drop down and put it into a text field.

 

I hope this helps, and check out our Forms online documentation for more code snippits and JavaScript help!

 

Madison

3 0

Replies

replied on August 11, 2015

Madison,

Thank you this helped, my code had changed due to other things on the form.  But I was able to use your function design to get things to work with the radio buttons as well.

Much appriciated,  Kip

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

Sign in to reply to this post.