Last active
July 7, 2021 13:00
-
-
Save ipokkel/eae1e3743b0a15b4053ff25f6757fc79 to your computer and use it in GitHub Desktop.
Multiple Select depends example for Register Helper and Custom JQuery.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* This recipe is an example of how to | |
* toggle the display of depending "child" fields | |
* when using select field type with a multiple option | |
* for Register Helper. | |
* | |
* @requires Register Helper Add On | |
* @link https://www.paidmembershipspro.com/add-ons/pmpro-register-helper-add-checkout-and-profile-fields/ | |
* | |
* You can add this recipe to your site by creating a custom plugin | |
* or using the Code Snippets plugin available for free in the WordPress repository. | |
* Read this companion article for step-by-step directions on either method. | |
* https://www.paidmembershipspro.com/create-a-plugin-for-pmpro-customizations/ | |
*/ | |
function my_pmprorh_init_depends_multiselect() { | |
//don't break if Register Helper is not loaded | |
if ( ! function_exists( 'pmprorh_add_registration_field' ) ) { | |
return false; | |
} | |
//define the fields | |
$fields = array(); | |
$fields[] = new PMProRH_Field( | |
'multiple_select_parent', // input name, will also be used as meta key | |
'select', // type of field | |
array( | |
'label' => 'Multiple Select Parent', | |
'multiple' => true, //allow multiple selections for select | |
'options' => array( | |
'option_1' => 'Option 1', | |
'option_2' => 'Option 2', | |
'option_3' => 'Option 3', | |
), | |
) | |
); | |
$fields[] = new PMProRH_Field( | |
'multiple_select_child', // input name, will also be used as meta key | |
'text', // type of field | |
array( | |
'label' => 'Multiple Select Child', | |
) | |
); | |
//add the fields into a new checkout_boxes are of the checkout page | |
foreach ( $fields as $field ) { | |
pmprorh_add_registration_field( | |
'checkout_boxes', // location on checkout page | |
$field // PMProRH_Field object | |
); | |
} | |
unset( $field ); | |
//that's it. see the PMPro Register Helper readme for more information and examples. | |
} | |
add_action( 'init', 'my_pmprorh_init_depends_multiselect' ); | |
function add_multiselect_depends_js_to_footer_example() { | |
global $pmpro_pages; | |
// Only load script on checkout page. | |
if ( is_page( $pmpro_pages['checkout'] ) ) { | |
?> | |
<script type="text/javascript"> | |
jQuery(document).ready(function($){ | |
/* Enter your values below */ | |
// 1. Multiselect or select2 field name here | |
var depend_parent_field_name = 'multiple_select_parent'; | |
// 2. The value of the option you want to check. | |
var depend_value = 'option_3'; // the value of the option you want to check. | |
// 3. The name of the field that depends on the parent field | |
var depend_child_field_name = 'multiple_select_child'; | |
// 4. Set to true to make this depending field required or set to false to make it optional | |
var required_field = true; | |
/* ************************************************************** */ | |
/* That's all, you don't need to change anything below this line */ | |
/* ************************************************************** */ | |
// Variables | |
var depend_parent = '#' + depend_parent_field_name; // #multiple_select_parent | |
var depend_child = '#' + depend_child_field_name; // #multiple_select_child | |
var depend_child_div = depend_child + '_div'; // #multiple_select_child_div | |
var depend_child_required = depend_child + '_required'; // #multiple_select_child_required | |
var depend_child_span = '<span id="' + depend_child_field_name + '_required" class="pmpro_asterisk"> <abbr title="Required Field">*</abbr></span>'; | |
// Hide child field | |
$(depend_child_div).hide(); | |
// Add required asterisk | |
$(depend_child).after(depend_child_span); | |
// Hide required asterisk | |
$(depend_child_required).hide(); | |
// Show fields. | |
$(depend_parent).change(function () { | |
jQuery.inArray(depend_value, $(this).val()) > -1 ? $(depend_child_div).show() : $(depend_child_div).hide(); | |
// Optional - Make Required | |
if (required_field) { | |
jQuery.inArray(depend_value, $(this).val()) > -1 ? $(depend_child).prop('required', true).addClass('pmpro_required') : $(depend_child).prop('required', false).removeClass('pmpro_required'); | |
jQuery.inArray(depend_value, $(this).val()) > -1 ? $(depend_child_required).show() : $(depend_child_required).hide(); | |
} | |
}); | |
}); | |
</script> | |
<?php | |
} | |
} | |
add_action( 'wp_footer', 'add_multiselect_depends_js_to_footer_example' ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Also see:
Select - https://gist.github.com/ipokkel/2dab7759c694e71d7a2549bf8207dce0
Select2 - https://gist.github.com/ipokkel/7cc884a978cda61b164cc875a4a95632