[Resolved] conditional filter display on parametric search

[Author]

Posts

[culturaI]

Hello, i can correctly setup a conditional field on cred that appear if another field is chosen. For example:

I have a selectfield "how do you know about us" > agency-university-etc...
If i select "agency" appear another field "what agency" > agency1-agency2-etc
If i select "university" appear another field "what university" > university1-university2-etc
Until now everything ik OK

My question is
There is the possibility to do the same thing on parametric filtering?

I would to select filter "how do you know about us" and another filter appear accordingly

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi there

Firstly, please note that you are posting in the Community Forum for users of the free Types plugin. As a Toolset customer you can and should post in the Technical Support forum which we prioritise and where you should receive speedier service.

The same option to conditionally display filters in a custom search form does not exist, I'm afraid.

You can set this up by adding some custom jQuery to your filter controls.

You can use hide() when the page loads to hide the elements you don't want to appear: hidden link

You can check when another field changes using change(): hidden link

You can then show() the elements you want to reveal: hidden link

If you get stuck, let me know.

[culturaI]

Thanks Nigel i understand!
Can you write a brief/simple example of hide jquery in my case?
Then i will write for myself

Thanks!

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Here is a crude example which simply hides one filter until another filter has been changed. It doesn't test what it has been changed to, for example, simply that something has been selected.

Because I want to hide both the filter itself and its label, I add a class to the wrapper DIV for the form group so that I can target it with jQuery. In my example I add a class of "show-on-change".

Add the following to the custom JS section of the Filter Editor.

( function( $ ) {
	$( document ).ready( function(){
		// Initially hide filter
		$('.show-on-change').hide();

		// Add change listener to other filter
		$('select[name="wpv-wpcf-field-slug"]').change( function(){

			// reveal hidden filter
			$('.show-on-change').show();
		});
	});
})( jQuery );

You will need to use your browser tools to inspect the filter form to identify the selector that can be used to target the change event. In my case it is a select dropdown for a custom field filter.

[culturaI]

Thanks Nigel your code it's working good:

I used:

( function( $ ) {
    $( document ).ready( function(){
        // Initially hide filter
        $('.show-on-change').hide();
 
        // Add change listener to other filter
        $('select[name="wpv-wpcf-come-hai-saputo-dei-corsi"]').change( function(){
 
            // reveal hidden filter
            $('.show-on-change').show();
        });
    });
})( jQuery );

How can i show target field (show-on-change) only if a certain option is selected?

[culturaI]

Ok i managed how to.

Sharing the code for reference:
added class to form1: "quale-agenzia"
added class to form2: "quale-universita"

added code to views

( function( $ ) {
    $( document ).ready( function(){
        // Initially hide filter
        $('.quale-agenzia').hide();
        $('.quale-universita').hide();
 
            
        // Add change listener to other filter
        $('select[name="wpv-wpcf-come-hai-saputo-dei-corsi"]').change( function(){
           if ( $(this).val() == "Agenzie" ) {$('.quale-agenzia').show();$('.quale-universita').hide();}
           if ( $(this).val() == "Università" ) {$('.quale-universita').show();$('.quale-agenzia').hide();}
        });
    });
})( jQuery );

Working good.

Thanks Nigel!