Question

hide rows in table based on exterior selection

Forms

Updated October 23, 2017

asked on October 18, 2017

I have a table in a starting form set up so each row number represents a day of the month. Users fill out days worked and submits the form. In the second stage of the process (form 2), I would like the user to have the ability to choose whether or not they see any empty rows. This will allow for streamlined processing.

I was thinking I could make a radio field they could check (outside table), that would make the empty rows in the table disappear/reappear. How do I accomplish this?

For example, the Field may be something like this...

If "Yes" is selected, empty rows in the table disappear. If "No" is selected, empty rows in the table appear.

As the form is right now, all rows are visible.

0 0

Answer

SELECTED ANSWER

replied on October 19, 2017

$(document).ready(function(){
  //calls function on radio button change.
  $('#q75 input').change(function(){
    if($('#q75 input:checked').val() == 'Yes') //Checks Radio button value
        {
         hideRow(); //hides empty rows
        }
    else
    {
     showAllRows(); //shows all rows
    }
  });
  
  function hideRow(){ 
    //#q11 is the tables id identifier. loop through rows on each
  $('#q11.cf-table-block tr').each(function(){
    //.dateCol1 is the css class of input field least likely to contain data. change this to your css class
     var emptyField = $(this).find('.dateCol1 input').val();  
  if( emptyField == ''){ 
    //hides row if field does not contain data
    $(this).closest('tr').hide();
  		}
     });
  } 
     
  function showAllRows(){   //loops through each row in table and shows the row.
	$('#q11.cf-table-block tr').each(function(){
      $(this).closest('tr').show();
    });
  }


});

Try this. You will need to change the Table Id where I have '#q11' to what you have for your table id and also add/ update a css class to one of your columns. You can use whatever name you want here and for whatever column you need, but just keep in mind that this is designed to look for a single line field and check it's value.

css class location.PNG (27.15 KB)

| Download

0 0

Replies

replied on October 18, 2017 • Show version history

Try something like this in the Field Rules:

HIDE
- column1
- column2
- column3
- column4
WHEN ALL
- Hide empty rows = YES
- column1 is empty
- column2 is empty
- column3 is empty
- column4 is empty

0 0

replied on October 18, 2017

That hid the contents of the row, but not the row itself. So on the screen you still see this:

0 0

replied on October 18, 2017

Okay, I was hoping that would do the trick, but it looks like you're going to need custom JavaScript to make this work they way you want.

0 0

replied on October 18, 2017

Hi Mary,

Something similar to this should work. You would Input this Javascript on the second form.

$(document).ready(function(){
  //calls function on form load
  hideRow();
  
  function hideRow(){ 
    //.table2 is the tables css identifier. loop through rows on each
  $('.table2.cf-table-block tr').each(function(){
    //.dateCol1 is the css class of input field least likely to contain data
     var emptyField = $(this).find('.dateCol1 input').val();  
  if( emptyField == ''){ 
    //hides row if field does not contain data
    $(this).closest('tr').hide();
  }
});
}
});

This is not a complete solution of what you are after, but should hopefully put you on the right track. If you want a complete js code to input into your form, can you provide me the class names of your check box, table and table rows and I'll see what I can come up with.

Kind Regards,

Aaron

0 0

View 2 previous replies

replied on October 19, 2017

Here is the info you requested...

The user may need to edit the table, so I would like them to select from the following field to hide (or show) the rows.

I am new to coding, so I would appreciate any help.

Thanks.

0 0

SELECTED ANSWER

replied on October 19, 2017

$(document).ready(function(){
  //calls function on radio button change.
  $('#q75 input').change(function(){
    if($('#q75 input:checked').val() == 'Yes') //Checks Radio button value
        {
         hideRow(); //hides empty rows
        }
    else
    {
     showAllRows(); //shows all rows
    }
  });
  
  function hideRow(){ 
    //#q11 is the tables id identifier. loop through rows on each
  $('#q11.cf-table-block tr').each(function(){
    //.dateCol1 is the css class of input field least likely to contain data. change this to your css class
     var emptyField = $(this).find('.dateCol1 input').val();  
  if( emptyField == ''){ 
    //hides row if field does not contain data
    $(this).closest('tr').hide();
  		}
     });
  } 
     
  function showAllRows(){   //loops through each row in table and shows the row.
	$('#q11.cf-table-block tr').each(function(){
      $(this).closest('tr').show();
    });
  }


});

css class location.PNG (27.15 KB)

| Download

0 0

replied on October 23, 2017

This did work for a single line field. Of course, the group I am designing it for wants a multiline field. Is there a way to adjust, or do I just make them adapt?

0 0

replied on October 23, 2017

Never mind, I managed to figure it out. I changed line 18 from your code to make it work for a multi-line field.

var emptyField = $(this).find('.dateCol1 textarea').val();

Thanks for all your help. I will mark your response as the answer, as it did what I asked. I just neglected to mention it was a multivalue field.

0 0

replied on October 23, 2017

Hi Mary,

Thank you! Also, the other type of selection is for the dropdown fields, they are 'select'. The Laserfiche administration guide has a good overview of what you can do if you haven't already checked it out.

https://www.laserfiche.com/support/webhelp/Laserfiche/10/en-us/administration/#../Subsystems/Forms/Content/Forms/Getting-Started-With-JavaScript.htm%3FTocPath%3DForms%7CCreating%2520a%2520Form%7C_____7

0 0

You are not allowed to follow up in this post.

Question

Question

hide rows in table based on exterior selection

Answer

Replies

Sign in to reply to this post.