[Resolved] radio button parametric search display_values

[Author]

Posts

[malagaS]

Tell us what you are trying to do? display one radio button choice for 2 different values

Is there any documentation that you are following?

Is there a similar example that we can see?

What is the link to your site? in development

I'm trying to display 2 radio button choices in a parametric search filter: Yes and No.
there are 3 values. A, B, C.
if A then Yes, if B or C, then No.
how do I do this?
[wpv-control-postmeta type="radios" field="wpcf-item" source="custom" url_param="wpv-wpcf-item" values=....

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

To achieve this, I'll recommend the following steps:

1. You can add the checkboxes type search field with the 3 options 'A', 'B', and 'C', as you normally would.
( a checkboxes type field, because for 'no', you need two values to be selected 'B' and 'C' )

2. Along with this hidden field's code, you'll include a custom radio field's HTML, which will only have two options, 'yes' and 'no'. This is the field that visitors will see and interact with.

Example:

<div class="form-group">
	<label for="custom-radio-field">Custom Radio Field</label>
	<div class="radio">
		<label for="custom-radio-field-yes">
			<input type="radio" class="js-wpv-filter-trigger" name="custom-radio-field" value="yes" id="custom-radio-field-yes">
			Yes
		</label>
	</div>
	<div class="radio">
		<label for="custom-radio-field-no">
			<input type="radio" class="js-wpv-filter-trigger" name="custom-radio-field" value="no" id="custom-radio-field-no">
			No
		</label>
	</div>
</div>

3. Next, in your view's JS editor, you'll include a custom script that will detect changes made to this custom radio field and then select the A option for yes, and B and C for no:

jQuery( 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 ) {
	jQuery('input[type=radio][name=custom-radio-field]').change(function() {
		jQuery('input[type=checkbox][name*=wpv-wpcf-company-radio]').attr("checked",false);
		if (this.value == 'yes') {
			jQuery('input[type=checkbox][name*=wpv-wpcf-company-radio][value=a]').attr('checked','checked');
		}
		else if (this.value == 'no') {
			jQuery('input[type=checkbox][name*=wpv-wpcf-company-radio][value=b]').attr('checked','checked');
			jQuery('input[type=checkbox][name*=wpv-wpcf-company-radio][value=c]').attr('checked','checked');  
		}	
 	});  
});

Note: In this example script, I've used the custom field slug 'company-radio'. But please update this slug, as per your custom field's slug.

Once the script is working correctly to trigger relevant selection in the checkboxes type field, you can hide the checkboxes type field, so visitors can't interact with them directly.

regards,
Waqar

[malagaS]

Thanks Waqar - this works perfectly. I needed to hide the values from displaying if display:none is unchecked in inspector, so I used random display_values.

The only issue is that I can't get the radio buttons to stay checked after selecting.

[Waqar]

Thanks for the update and glad that it worked.

Here is the updated example script, that also keeps the radio buttons checked, when the search has been performed:

jQuery( 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 ) {
 
    if( jQuery('input[type=checkbox][name*=wpv-wpcf-company-radio][value=a]').is(':checked') ){
        jQuery('input[type=radio][name*=custom-radio-field][value=yes]').prop('checked', true);
    }
    if( jQuery('input[type=checkbox][name*=wpv-wpcf-company-radio][value=b]').is(':checked') ){
        jQuery('input[type=radio][name*=custom-radio-field][value=no]').prop('checked', true);
    }
    if( jQuery('input[type=checkbox][name*=wpv-wpcf-company-radio][value=c]').is(':checked') ){
        jQuery('input[type=radio][name*=custom-radio-field][value=no]').prop('checked', true);
    }
  
    jQuery('input[type=radio][name=custom-radio-field]').change(function() {
        jQuery('input[type=checkbox][name*=wpv-wpcf-company-radio]').attr("checked",false);
        if (this.value == 'yes') {
            jQuery('input[type=checkbox][name*=wpv-wpcf-company-radio][value=a]').attr('checked','checked');
        }
        else if (this.value == 'no') {
            jQuery('input[type=checkbox][name*=wpv-wpcf-company-radio][value=b]').attr('checked','checked');
            jQuery('input[type=checkbox][name*=wpv-wpcf-company-radio][value=c]').attr('checked','checked');  
        }
    });
    
});