Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Select depends example for Register Helper and Custom JQuery.
<?php
/**
* This recipe is an example of how to
* toggle the display of depending "child" field
* when using a select dropdown field type
* 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_select_example() {
//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(
'depends_1',
'select',
array(
'label' => 'Select Something',
'profile' => true,
'options' => array(
'' => 'Select one',
'm' => 'male',
'f' => 'female',
'o' => 'other',
),
)
);
$fields[] = new PMProRH_Field(
'depends_2',
'text',
array(
'label' => 'This Depends',
'profile' => true,
'required' => false,
)
);
//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
);
}
//that's it. see the PMPro Register Helper readme for more information and examples.
}
add_action( 'init', 'my_pmprorh_init_depends_select_example' );
function add_select_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 = 'depends_1';
// 2. The value of the option you want to check.
var depend_value = 'o'; // 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 = 'depends_2';
// 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_select_depends_js_to_footer_example' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.