Last active
July 7, 2021 13:01
-
-
Save ipokkel/7cc884a978cda61b164cc875a4a95632 to your computer and use it in GitHub Desktop.
Select2 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 select2 field types | |
* 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_select2_and_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( | |
'select_2_parent', // input field name, used as meta key | |
'select2', // field type | |
array( | |
'label' => 'Select2 Parent', | |
'options' => array( | |
'option_1' => 'Option 1', | |
'option_2' => 'Option 2', | |
'option_3' => 'Option 3', | |
), | |
) | |
); | |
$fields[] = new PMProRH_Field( | |
'select_2_child', // input name, will also be used as meta key | |
'text', // type of field | |
array( | |
'label' => 'Select2 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_select2_and_multiselect' ); | |
function add_select2_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 = 'select_2_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 = 'select_2_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; // #select_2_parent | |
var depend_child = '#' + depend_child_field_name; // #select_2_child | |
var depend_child_div = depend_child + '_div'; // #select_2_child_div | |
var depend_child_required = depend_child + '_required'; // #select_2_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_select2_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
Select Multiple - https://gist.github.com/ipokkel/eae1e3743b0a15b4053ff25f6757fc79