DFFS > Filtering Checkbox based on another field answer

[Jhap]

Hi Sir Alex,

Is it possible in DFFS to filter checkbox selection based on another field answer?
==========================
Scenario :
EVENT TYPE field choices (radio type) = Company, Departmental
REQUIRED field choices (checkbox type) = Catering, Transportation, Other

So, when I select DEPARTMENTAL the selection in the field REQUIRED should show only CATERING and OTHER. when I select COMPANY it will show all the selection available in REQUIRED field.

==========================

Thank you so much.

Attachments:

1. 

   Checkbox_Filtering.png
   

[Alexander Bautz]

You can add this to the custom js:

function toggleOptionVisibility(){
	var val = getFieldValue("ChoiceColumn2"), arr = [];
	switch(val){
		case "Enter Choice #1":
			arr = ["Enter Choice #1","Enter Choice #2","Enter Choice #3"];
		break;
		case "Enter Choice #2":
			arr = ["Enter Choice #4","Enter Choice #5","Enter Choice #6"];
		break;
		case "Enter Choice #3":
			arr = ["Enter Choice #7","Enter Choice #8","Enter Choice #9"];
		break;
	}
	jQuery("#dffs_ChoiceColumn3 input").each(function(){
		if(jQuery.inArray(jQuery(this).next().text(),arr) > -1){
			jQuery(this).parents("tr:first").show();
		}else{
			jQuery(this).parents("tr:first").hide();
		}
	});
}

// On change
jQuery("#dffs_ChoiceColumn2 input:radio").on("click",function(){
   	toggleOptionVisibility();
});


// On load
toggleOptionVisibility();

Change “ChoiceColumn2” with the FIN of your “EVENT TYPE” col, and “ChoiceColumn3” with the FIN of your “REQUIRED” col. Also change the “Enter Choice #X” to match the trigger values in the “EVENT TYPE” in the “switch” statement and the array of choices to show in the “arr” to match your “REQUIRED” options.

Alexander

[Jhap]

Thank you so much sir Alex. It is working. Only it does not work if the
checkbox is configured in Specify the number of columns to distribute the choices over under the tab Misc of DFFS.

I configured the REQUIRED checkbox to display 4 selections per row as per my screenshot attached in the first thread.

1st row : Security, Catering, Transportation, Venue Reservation
2nd row : Media Capturing, Electronic Media, Print Media, Other

Now my Event Type field selection are COMPANY and DEPARTMENTAL. If the event type selected is DEPARTMENTAL, then it will show Security, Media Capturing, Electronic Media, Print Media, Other. In this case, when I select DEPARTMENTAL as the event type, the it shows me only the selection which are available in the 2^nd row.

It is possible to make it work if the checkbox type field is configured in Specify the number of columns to distribute the choices over under the tab Misc of DFFS?

Kind regards,

Attachments:

1. 

   Capture.png
   

[Jhap]

Hi Sir Alex,

Please ignore it. I manage to make it work with Specify the number of columns to distribute the choices over under the tab Misc of DFFS?

I changed the tr to td

	jQuery("#dffs_ChoiceColumn3 input").each(function(){
		if(jQuery.inArray(jQuery(this).next().text(),arr) > -1){
			jQuery(this).parents("tr:first").show();
		}else{
			jQuery(this).parents("tr:first").hide();
		}
	});

• This reply was modified 7 years, 1 month ago by Jhap.

[Alexander Bautz]

I’m glad you figured it out.

Alexander

[Brett Ross]

How would you do this if ChoiceColumn3 is a drop-down rather than a checkbox?

[Alexander Bautz]

Modified to work with dropdown select. Please note that you cannot use a “default value” in list settings. Also note that if you plan to use it in EditForm you must add an option like “please select an option” to be able to properly filter the options. If you don’t do that, the previously selected option will stick even if you hide it.

function toggleOptionVisibility(){
	var val = getFieldValue("ChoiceColumn2"), arr = [];
	switch(val){
		case "Enter Choice #1":
			arr = ["","Enter Choice #1","Enter Choice #2","Enter Choice #3"];
		break;
		case "Enter Choice #2":
			arr = ["","Enter Choice #4","Enter Choice #5","Enter Choice #6"];
		break;
		case "Enter Choice #3":
			arr = ["","Enter Choice #7","Enter Choice #8","Enter Choice #9"];
		break;
		default:
			arr = [""];
		break;
	}
	jQuery("#dffs_ChoiceColumn3 option").each(function(){
		if(jQuery.inArray(jQuery(this).text(),arr) > -1){
			jQuery(this).show();
		}else{
			jQuery(this).prop("selected",false).hide();
		}
	});
}

// On change
jQuery("#dffs_ChoiceColumn2 input:radio").on("click",function(){
   	toggleOptionVisibility();
});

// On load
toggleOptionVisibility();

[Chris Diltz]

This works perfectly in Chrome but the child drop-down (ChoiceColumn3) is not filtering in IE-11. What am I missing?

[Chris Diltz]

Also, I’m not getting any JS errors in the Custom JS editor, form, or in the console.

[Alexander Bautz]

Hi,
It turns out hiding an option won’t work in IE. Try changing the code like this:

jQuery("#dffs_ChoiceColumn3 option").each(function(){
    if(jQuery.inArray(jQuery(this).text(),arr) > -1){
        if (jQuery(this).parent().is("span")) {
            jQuery(this).unwrap().show();
        }
    }else{
        if (!jQuery(this).parent().is("span")) {
            jQuery(this).prop("selected",false).wrap("<span>").hide();
        }
    }
});

It will wrap the <option> tag in a <span> and it should work.

Alexander

[Chris Diltz]

That did the trick. Thanks Alex!

[Author]

Posts