Skip to content

Instantly share code, notes, and snippets.

@ipokkel
Last active July 7, 2021 13:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ipokkel/7cc884a978cda61b164cc875a4a95632 to your computer and use it in GitHub Desktop.
Save ipokkel/7cc884a978cda61b164cc875a4a95632 to your computer and use it in GitHub Desktop.
Select2 depends example for Register Helper and Custom JQuery.
<?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' );
@ipokkel
Copy link
Author

ipokkel commented Jul 7, 2021

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment