Question

Hidden table column appears with repeatable row

Forms Version 10 Web Customizations

Updated February 5, 2018

asked on December 26, 2017 • Show version history

Hi,

I have set a column to only show if the value "fees" or "other" are selected from a drop down list:

$(document).ready(function(){  
  var hidden = $('#q123, .expenseDescript');
  var dropDown = $('.expenseCategory select');
  hidden.hide();
  
  $(document).on('change',dropDown,function(){
    hidden.hide();
    dropDown.each(function(){
      if ($(this).val() == 'other' || $(this).val() == 'fees'){
        hidden.show();
      }
    });
  });
  
  
});

After finally getting this to work I noticed that when I add a new row, the conditions no longer work.

Conditions NOT met:

Conditions met:

Adding a new row:

What is the best way to get the conditioning for every row?

Thanks!

0 0

Answer

SELECTED ANSWER

replied on December 26, 2017

Hi Chris,

To make it work on the newly added row, you need to trigger the hiding function when click on the "Add" button like this:

  $('.cf-table-add-row').click(function() {
    $('#q123, .expenseDescript').hide();
    });

Also you need to trigger function for checking the drop-down field value when adding new rows.

Besides, why not use the field rules to show/hide the table columns?

1 0

View 4 previous replies

replied on December 27, 2017 • Show version history

Thanks again for your help Rui.

I tried the field rules at first, but it not how I want it to look. Here it is using field rules when the condition is not met:

^I loose valuable space on the form. Here it is when the condition is met:

I like it better when the entire column is removed. I will test the jQuery and reply. Thanks again!

0 0

replied on December 27, 2017

I am not proficient enough in jQuery (yet...) to check each row. If you have some code to "trigger the function when adding new rows", please send it on over. I'll keep working on this in the mean time.

Thanks again!

0 0

replied on December 27, 2017

For "trigger the function when adding new rows", you just need to put your code inside $('.cf-table-add-row').click(function() {}) and the code would run when adding new rows.

In your original code, $(document).on('change',dropDown,function(){}) means the code inside would run when change event is triggered on the dropDown, but the code won't run when adding new rows.

Another issue is that, you have var dropDown = $('.expenseCategory select'); on form load, so the dropDown variable would only contain the fields on the first row of table; when adding new rows the fields in new rows are not included in dropDown variable. I think you can just replace dropDown with $('.expenseCategory select') so it would do a query each time the code runs.

1 0

replied on December 28, 2017

Thanks for the explanation Rui. Did you mean to repeat $('.expenseCategory select') twice?

" Another issue is that, you have var dropDown = $('.expenseCategory select'); on form load, so the dropDown variable would only contain the fields on the first row of table; when adding new rows the fields in new rows are not included in dropDown variable. I think you can just replace dropDown with $('.expenseCategory select') so it would do a query each time the code runs."

I will start testing this. Thanks again.

0 0

replied on December 28, 2017

Not repeating, I meant using $('.expenseCategory select') to replace dropDown.

1 0

replied on December 29, 2017

Ok, I got that code working, but I need to add in another element. The problem is that if the condition is met in a previous row, the .cf-table-add-row function overrides the previous condition. The result is that the column gets hidden when it should still be visible. So here is my attempt at reviewing the value in the entire column to see if the conditions are met at the time of the click. When the new row is added, the column is hidden or shown based on what is already in the column. Of course, this code is not working for me. I could use some advice on how to get it to work.

As a note, the column I need to check is the first column (td:nth-child(1)).

  $('.cf-table-add-row').click(function() {
  	$('#q119 tr td:nth-child(1)').each(function () {
    	var texttocheck = this.val();
      if (texttocheck == 'other' || texttocheck == 'fees'){
        $('#q123, .expenseDescript').show();	
        }
      	else {  
      	$('#q123, .expenseDescript').show();	
          return false;
        }
    });  
  });

Thanks again!

0 0

replied on January 1, 2018

Not sure if I understand it correctly but it seems that you are trying to make the column shown when any of the dropdown field value matches the condition, right?

Instead of performing show/hide inside the each function, you can use a Boolean value to store the current status, and change the column show/hide after the each function based on the Boolean value.

0 0

Replies

replied on February 5, 2018

I finally got this going in case anyone finds this one day and can use it. The description column shows a required field (description) if the value is 'fees' or 'other'.

I ended up using an array to see if the values matched. If one of the the 2 matches occured, the column itself would no longer be hidden. Another function ran upon change to the table and if there was a match, show or hide the respective cell of the table. I know that's a brief description. I'll let hte code speak for itself:

//Additional Expenses Table
//hide description column initially 
	$('#q119 td:nth-child(3), #q119 th:nth-child(3)').hide();

//dynamically display Description column
  var checkCats = function(){//function to check array of values and show or hide Descritpion column 
    var totalRows = $('#q119 tr').length-1;
    var allValues = [];
    
    for (var r=1; r<totalRows+1; r++){
            
    var catVal = $('#q119 td:nth-child(2)').closest('tr:nth-child('+r+')').find('td select').val();
    var descrCell = $('#q119 tr:nth-child('+r+') td:nth-child(3)');
    var descrCol = $('#q119 td:nth-child(3)');
    var descrHead = $('#q119 th:nth-child(3)');
    
    if (catVal !=""){//add to array if not null
    allValues.push(catVal);
    };//if
      
    };//for
        
    if (($.inArray('other', allValues)!==-1) || ($.inArray('fees', allValues)!==-1)){
    //if value is not 'other' or 'fees', show description column
        descrCol.show();
        descrHead.show();
        //break;
    }
     else{//otherwise keep hidden or hide
        descrCol.hide();
        descrHead.hide();
     };
    };//checkCats function
    
  var checkCatVal = function(){//check value of individual cell and show or hide
    var totalRows = $('#q119 tr').length-1;
        
    for (var r=1; r<totalRows+1; r++){
    var catVal = $('#q119 td:nth-child(2)').closest('tr:nth-child('+r+')').find('td select').val();
    var descrCell = $('#q119 tr:nth-child('+r+') td:nth-child(3)');
    
    if (catVal =='other' || catVal == 'fees'){
     descrCell.css('visibility', 'visible');
    }
     else{
      descrCell.css('visibility', 'hidden');
    };//if
    };//for
  };//checkCatVal function
                    
  $('#q119 .cf-table-add-row').click(checkCats);//on add new row, run checkCats function
  
  var bothFunctions = function(){//combine 2 function variables
  	checkCats();
  	checkCatVal();
	};
  $('#q119').on('change', bothFunctions); //on change of the table run both function

All of the above occurs within the document.ready function.

Hope this helps

1 0

You are not allowed to follow up in this post.

Question

Question

Hidden table column appears with repeatable row

Answer

Replies

Sign in to reply to this post.