[Forminator] Load custom posts on Select Field and get IDs on the on-change event.

forminator-load-cpt-select-field.php

<?php
/**
 * Plugin Name: [Forminator] Load custom posts on Select Field and get IDs on the on-change event.
 * Plugin URI: https://wpmudev.com/
 * Description: With the ID retrieved on the "on change" event, you can write your custom code to get the post data and fill the correspondent fields on the form, more details about how to do it on the comment of this snippet.
 * Author: Glauber Silva @ WPMUDEV
 * Author URI: https://wpmudev.com/
 * Task: SLS-3568
 * License: GPLv2 or later
 *
 * @package WPMUDEV_Forminator_Load_Custom_Posts_On_Select_Field
 */

defined( 'ABSPATH' ) || exit;

/**
 * ### THE PROBLEM ###
 * 
 * We need a select field with a list of posts. Once a post is selected, other
 * form fields, like post title, post content, and others will get values from the selected post.
 * 
 * ### THE SOLUTION ###
 * 
 * Step #1 - Here we need to load the custom post types on a specific "select" field on the backend side. 
 * 
 * Step #2 - Now we need to get the post ID on the "on change" event of this select field on the frontend side.
 * 
 * Step #3 - In the frontend yet, we need to do a call to a backend function through AJAX that will return the 
 * post data. And with that return, we need to fill the corresponding fields on the form.
 * 
 * ### IMPORTANT ###
 *
 * This snippet is not a final implementation, just a base to implement your custom solution.
 * I just write steps#1 and #2, you'll need to write step #3. 
 * 
 * For more details about how to implement the step #3, check the link below:
 * 
 * @link https://codex.wordpress.org/AJAX_in_Plugins
 * 
 */

/**
 * STEP #1 configurations: 
 * 
 * On the $allowed_forms array insert the form IDs (you can insert more than one separate by comma)
 * that should use this solution.
 * 
 * On the $select_fields_data array insert the select field and the correspondent Custom Post Type to be loaded
 * (you can insert more than one separate by comma) 
 * 
 */
add_filter(
	'forminator_cform_render_fields',
	function( $wrappers, $form_id ) {

		$allowed_forms = array (
			1608,
		);

		if ( ! in_array( $form_id, $allowed_forms) ) {
			return $wrappers;
		}

		$select_fields_data = array(
			'select-1' => 'product',
			//'select-2' => 'CPT_2',
		);

		foreach ( $wrappers as $wrapper_key => $wrapper ) {
			if ( ! isset( $wrapper[ 'fields' ] ) ) {
				continue;
			}

			if ( 
				isset( $select_fields_data[ $wrapper[ 'fields' ][ 0 ][ 'element_id' ] ] ) &&
				! empty( $select_fields_data[ $wrapper[ 'fields' ][ 0 ][ 'element_id' ] ] )
			) {
				$posts = get_posts( array( 'post_type' => $select_fields_data[ $wrapper[ 'fields' ][ 0 ][ 'element_id' ] ] ) );

				if ( ! empty( $posts ) ) {
					$new_options = array();

					foreach( $posts as $post ) {
						$new_options[] = array(
							'label' => $post->post_title,
							'value' => $post->ID,
							'limit' => '',
							'key'   => forminator_unique_key(),
						);
					}

					$wrappers[ $wrapper_key ][ 'fields' ][ 0 ][ 'options' ] = $new_options;
				}
			}
		}

		return $wrappers;
	},
	10,
	2
);

/**
 * STEP #2 configurations:
 * 
 * On the block of code below you'll find the following comment: 
 *
 * // YOUR CUSTOM CODE TO LOAD SPECIFIC POST DATA GOES HERE...
 * 
 * After that, is where you should write your custom code to implement
 * step #3 mentioned earlier. For more details, check the link below:
 * 
 * @link https://codex.wordpress.org/AJAX_in_Plugins
 * 
 * !!! ATTENTION !!!
 * 
 * Pelase, note that in the code below you'll find the following:
 * 
 * '.my-custom-select-1-class'
 * 
 * This is a unique class name (you can use any class name that you wish)
 * that we use to recognize the select field that we want to handle. 
 * 
 * To set this class, access the following path:
 * 
 * YOUR SELECT FIELD > Edit Field > STYLING > Additional CSS Classes
 * 
 * And insert the class name without quotation marks and without the dot in the beginner, like that:
 * 
 * my-custom-select-1-class
 * 
 */
add_filter(
	'forminator_render_form_markup',
	function ( $html ) {

		ob_start();
		?>
			<script type="text/javascript">

				( ( $,d ) => {

					$( d ).ready( function() {					
											
						var select_1 = '.my-custom-select-1-class';

						function load_post_data_select_1( post_id ) {
							console.log('post_id: ', post_id);
							// YOUR CUSTOM CODE TO LOAD SPECIFIC POST DATA GOES HERE...
						}

						if ( $( select_1 ).length ) {

							$( select_1 ).on('change', function (event) {
								load_post_data_select_1( event.target.value );
							});
							
							$( select_1 ).val($( `${select_1} option:eq(0)` ).val()).trigger('change');
						}

						/*var select_2 = '.my-custom-select-2-class';

						function load_post_data_select_2( post_id ) {
							console.log('post_id: ', post_id);
							// YOUR CUSTOM CODE TO LOAD SPECIFIC POST DATA GOES HERE...
						}

						if ( $( select_2 ).length ) {

							$( select_2 ).on('change', function (event) {
								load_post_data_select_2( event.target.value );
							});
							
							$( select_2 ).val($( `${select_2} option:eq(0)` ).val()).trigger('change');
						}*/

					} );

				} ) ( jQuery,document );
			</script>
		<?php
		$javascript = ob_get_clean();

		return $html . $javascript; // phpcs:ignore
	},
	999
);