for the custom field B I set the conditional display when the value of A custom field is === 1
In the view I have the custom fields used for searching and even if the A field is not = 1 it is still showing the B field in the search form.
How may I tell the search form to show the field B only if A===1?
Thank you for contacting us and I'd be happy to assist.
The conditional display rules for the custom fields are applied in the post/page edit screen in the back-end and in the front-end Toolset forms, but, not in the search form for the views.
To show or hide the specific fields in the search form based on the values from another field, you'll need to include some custom script.
If you could share the link to the page where this view and the search field can be seen, I'll be able to share some more specific pointers on how the custom script can be used.
Hi Waqar,
thanks for your reply.
Please take a look here hidden link the 4rd select should be visible only if first select is set to 1.
Please share a script to allow this.
Best regards,
Gianni
Here is an example code snippet that you can include in the view's "Custom JS " field:
jQuery(document).ready(function( $ ) {
// hide the 4th select field
$('.wpv-filter-form .wp-block-toolset-blocks-grid > .wp-block-toolset-blocks-grid-column:nth-of-type(4)').hide();
// execute the function to see if the first field value is equal to 1 or not
detactChangeField1();
// execute the function to see if the first field value is equal to 1 or not, when the first field's value is changed
$('.wpv-filter-form select[name="wpv-wpcf-a-chi-e-rivolto-il-corso"]').on('change', function() {
detactChangeField1();
});
// function to see if the first field value is equal to 1 or not and show or hide the 4th field accordingly
function detactChangeField1() {
// get the value of the first field
var firstFieldVal = $('.wpv-filter-form select[name="wpv-wpcf-a-chi-e-rivolto-il-corso"]').val();
// if the first field value is equal to 1
if (firstFieldVal == 1) {
// show the 4th field
$('.wpv-filter-form .wp-block-toolset-blocks-grid > .wp-block-toolset-blocks-grid-column:nth-of-type(4)').show();
}
else
{
// hide the 4th field
$('.wpv-filter-form .wp-block-toolset-blocks-grid > .wp-block-toolset-blocks-grid-column:nth-of-type(4)').hide();
}
}
});
It will hide the 4th select field, and will only show it when the value of the first select field is equal to 1.
Note: The custom code examples from our forum are shared to get you started in the right direction. You're welcome to adjust them as needed and for more personalized customization assistance, you can consider hiring a professional from our list of recommended contractors: https://toolset.com/contractors/
Hi Waqar,
thanks for your reply.
I added the code in the js editor of the view, but nothing has changed in the front end.
Could you please take a look?
Thanks,
Gianni
I noticed that the view "vistacorsi" is created inside the content template with ID "731" and has no title.
The custom code was added in the JS editor of this content template ( screenshot: hidden link ), but since this template is not loaded on the "corsi" page, the custom script was also not loading.
I've removed the script from the content template's "JS editor" and instead added it in the view's own "Custom JS" field ( screenshot: hidden link ) and it is working now.
Note: Since the option "Show only filter options that would produce results" is enabled in the view's custom search settings, I've added some changes to the custom script, so that it also works when the view's components are changed through the AJAX.
Updated script:
( function( $ ) {
$( document ).on( 'ready js_event_wpv_pagination_completed js_event_wpv_parametric_search_form_updated js_event_wpv_parametric_search_results_updated', function( event, data ) {
// hide the 4th select field
$('.wpv-filter-form .wp-block-toolset-blocks-grid > .wp-block-toolset-blocks-grid-column:nth-of-type(4)').hide();
// execute the function to see if the first field value is equal to 1 or not
detectChangeField1();
// execute the function to see if the first field value is equal to 1 or not, when the first field's value is changed
$('.wpv-filter-form select[name="wpv-wpcf-a-chi-e-rivolto-il-corso"]').on('change', function() {
detectChangeField1();
});
});
// function to see if the first field value is equal to 1 or not and show or hide the 4th field accordingly
function detectChangeField1() {
// get the value of the first field
var firstFieldVal = $('.wpv-filter-form select[name="wpv-wpcf-a-chi-e-rivolto-il-corso"]').val();
// if the first field value is equal to 1
if (firstFieldVal == 1) {
// show the 4th field
$('.wpv-filter-form .wp-block-toolset-blocks-grid > .wp-block-toolset-blocks-grid-column:nth-of-type(4)').show();
}
else
{
// hide the 4th field
$('.wpv-filter-form .wp-block-toolset-blocks-grid > .wp-block-toolset-blocks-grid-column:nth-of-type(4)').hide();
}
}
})( jQuery );
Note: The custom script won't be affected if you'll include URL parameters.
the script hide and show the field in the 4th position (wp-block-toolset-blocks-grid-column:nth-of-type(4)
Imagine that. if the first field is ==1 in the 4th position I have to show one custom fields, if it is ==2 in the 4th position I have to show another custom fields.
How may I achieve this result
Warm regsards,
Gianni
Let me try to explain.
Imagine the current scenario, the 4th field maybe shown or hidden based on the value of the first field. This is fine, but I can the value of the first field is 1 I need the hide the current custom field and show another one that is not currenly in the search custom fields. This is may help to show a specific field based on selection without leaving that column empty
Hope this help.
Best,
Gianni
This is possible and you'll have to include the other search field in the same fourth column as the "Qual è l'area formative?" field.
When the page will load both fields will be part of that fourth column, but with the extended custom script, one of the fields will be hidden and the other will be shown.
And, when the value of the "A chi è rivolto il corso?" field will change, the hidden field will become visible and the visible field will become hidden.
As we can only share basic examples of the custom code over the support forum, to write the completely customized script/code for your requirement, you'll need to hire a professional developer.
( ref: https://toolset.com/contractors/ )
This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.
