custom post types - Change dynamically the dropdown list value

I have a form where i list a related custom post type by ID of the parent custom post type on a checkbox list like the picture.

so when i check an option to 4 options i want to have a list of the terms that have the custom posts i checked on the dropdown list.

the form is constructed with elementor pro but to have the list of posts and the taxonomy terms i do it with code (i do my function and i include it with shortcode on functions.php).

/*
 * Display list of  relationship field
 *
*/

function list_formation_caces(){
echo "<div class='golistgo'>";
$args = array(
    'post_type' => 'categories',
    'posts_per_page' => 20,
);
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
    $formations = get_posts(array(
        'post_type' => 'formations',
        'post__in' => array(16061),
        'meta_query' => array(
            array(
                'key' => 'categories', // name of custom field
                'value' => '"' . get_the_ID() . '"', // matches exactly "123", not just 123. This prevents a match for "1234"
                'compare' => 'LIKE'
            )
        )
    ));
    if($formations){
        foreach ($formations as $categorie){
            $image = get_field('image_form');
            if($image){
                // Image variables.
                $url = $image['url'];
                $title = $image['title'];
                $alt = $image['alt'];
                $caption = $image['caption'];

                // Thumbnail size attributes.
                $size = 'thumbnail';
                $thumb = $image['sizes'][ $size ];
                $width = $image['sizes'][ $size . '-width' ];
                $height = $image['sizes'][ $size . '-height' ];
            }
            echo "<input type=\"checkbox\" class=\"btn-check\" name=\"Description\" value =\"". get_the_title() .
                "\" id=\"". get_the_ID()  ."\">";
            echo "<label class=\"options-form\" for='". get_the_ID() ."'>";
                               echo "<div class=\"image-cat\">";
                                    echo get_the_post_thumbnail();
                               echo"</div>";
                               echo "<div class=\"body-cat\">";
                                    echo "<div  class=\"title-formation\">" ;
                                    echo "</div>";
                                    echo "<div  class=\"title-cat\">" ;
                                    echo the_title() . ":" . " <span  class=\"describe-cat\">" . get_field('type_machine') . "</span>";
                                    echo "</div>";
                               echo "</div>";
            echo "</label>";
        }
    }
endwhile;
wp_reset_postdata();
echo "</div>";
}

function shortcode_list_categ_caces(){
            return (list_formation_caces()) ;
}
add_shortcode('list_formation_caces', 'shortcode_list_categ_caces');

function shortcode_total_count_checked(){

return ("<div class='count-checkboxes-wrapper'>" . "<h2 class='title-count'>" . "Vous avez choisis" .
    "<span id='count-checked-checkboxes'> " . "  0" ."</span> catégorie(s)."." </h2>" .
    "</div>");
}
add_shortcode('count_checked', 'shortcode_total_count_checked');

function list_sessions_caces()
{
    $terms = get_terms( array(
        'taxonomy' => 'sessions',
        'hide_empty' => false,
    ) );
    echo'<label for="form-field-centre" class="elementor-field-label">Où se déroulera la formation ?</label>';
    echo '<div class="elementor-field elementor-select-wrapper ">';
    echo '<select name="CENTRE"  id="form-field-field_centre" class="elementor-field-textual elementor-size-sm">';
    echo '<option value="">Choisir une session de formation </option> ';
    foreach ($terms as $term) {
        echo '<option value="' . $term->name . '">' . $term->name . '</option>';
    }
    echo '</select>';
    echo'</div>';
}
function shortcode_list_sessions(){
    return (list_sessions_caces()) ;
}
add_shortcode('list_sessions_caces', 'shortcode_list_sessions');

Any help, please!

I have a form where i list a related custom post type by ID of the parent custom post type on a checkbox list like the picture.

so when i check an option to 4 options i want to have a list of the terms that have the custom posts i checked on the dropdown list.

the form is constructed with elementor pro but to have the list of posts and the taxonomy terms i do it with code (i do my function and i include it with shortcode on functions.php).

/*
 * Display list of  relationship field
 *
*/

function list_formation_caces(){
echo "<div class='golistgo'>";
$args = array(
    'post_type' => 'categories',
    'posts_per_page' => 20,
);
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
    $formations = get_posts(array(
        'post_type' => 'formations',
        'post__in' => array(16061),
        'meta_query' => array(
            array(
                'key' => 'categories', // name of custom field
                'value' => '"' . get_the_ID() . '"', // matches exactly "123", not just 123. This prevents a match for "1234"
                'compare' => 'LIKE'
            )
        )
    ));
    if($formations){
        foreach ($formations as $categorie){
            $image = get_field('image_form');
            if($image){
                // Image variables.
                $url = $image['url'];
                $title = $image['title'];
                $alt = $image['alt'];
                $caption = $image['caption'];

                // Thumbnail size attributes.
                $size = 'thumbnail';
                $thumb = $image['sizes'][ $size ];
                $width = $image['sizes'][ $size . '-width' ];
                $height = $image['sizes'][ $size . '-height' ];
            }
            echo "<input type=\"checkbox\" class=\"btn-check\" name=\"Description\" value =\"". get_the_title() .
                "\" id=\"". get_the_ID()  ."\">";
            echo "<label class=\"options-form\" for='". get_the_ID() ."'>";
                               echo "<div class=\"image-cat\">";
                                    echo get_the_post_thumbnail();
                               echo"</div>";
                               echo "<div class=\"body-cat\">";
                                    echo "<div  class=\"title-formation\">" ;
                                    echo "</div>";
                                    echo "<div  class=\"title-cat\">" ;
                                    echo the_title() . ":" . " <span  class=\"describe-cat\">" . get_field('type_machine') . "</span>";
                                    echo "</div>";
                               echo "</div>";
            echo "</label>";
        }
    }
endwhile;
wp_reset_postdata();
echo "</div>";
}

function shortcode_list_categ_caces(){
            return (list_formation_caces()) ;
}
add_shortcode('list_formation_caces', 'shortcode_list_categ_caces');

function shortcode_total_count_checked(){

return ("<div class='count-checkboxes-wrapper'>" . "<h2 class='title-count'>" . "Vous avez choisis" .
    "<span id='count-checked-checkboxes'> " . "  0" ."</span> catégorie(s)."." </h2>" .
    "</div>");
}
add_shortcode('count_checked', 'shortcode_total_count_checked');

function list_sessions_caces()
{
    $terms = get_terms( array(
        'taxonomy' => 'sessions',
        'hide_empty' => false,
    ) );
    echo'<label for="form-field-centre" class="elementor-field-label">Où se déroulera la formation ?</label>';
    echo '<div class="elementor-field elementor-select-wrapper ">';
    echo '<select name="CENTRE"  id="form-field-field_centre" class="elementor-field-textual elementor-size-sm">';
    echo '<option value="">Choisir une session de formation </option> ';
    foreach ($terms as $term) {
        echo '<option value="' . $term->name . '">' . $term->name . '</option>';
    }
    echo '</select>';
    echo'</div>';
}
function shortcode_list_sessions(){
    return (list_sessions_caces()) ;
}
add_shortcode('list_sessions_caces', 'shortcode_list_sessions');

Any help, please!

• custom-post-types
• custom-taxonomy
• forms
• dropdown

Share Improve this question edited May 17, 2021 at 10:33 Mohamed Amine Landolsi asked May 17, 2021 at 9:48 Mohamed Amine LandolsiMohamed Amine Landolsi 144 bronze badges 5

• It's not clear (to me at least) what should happen on what action. Can you be very specific? As in; This is an ... and when I click ... what should happen is ... – Jos Commented May 17, 2021 at 10:01
• Sorry for that, when i check the value on checkbox (where i list the custom post) the dropdown of his taxonomy change dynamically with the value of this custom post. – Mohamed Amine Landolsi Commented May 17, 2021 at 10:03
• 1 Ok, (1.) I see no dropdown and no checkbox. I think you mean that the two portrait pictures are checkboxes and the two horizontal light-blue fields are dropdowns? Is that correct? (2.) You say that once you click a Custom Post Type you want the dropdown to change with the values 'of his taxonomy'. Is there a specific taxonomy for that Custom Post Type? Please be more specific, with all information there is (3.) Next to that, we need to see all of your code to be able to see what you attempt to do – Jos Commented May 17, 2021 at 10:06
• Yes @JosFaber that's it, you see it right. ok i have the code with it i get the custom post type on checkbox (portrait) , i will modify my question! just a minute – Mohamed Amine Landolsi Commented May 17, 2021 at 10:29
• @JosFaber i do it you can check please :) – Mohamed Amine Landolsi Commented May 17, 2021 at 10:54

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You can go two ways:

1. There is probably not much data for the taxonomies of both CPT's, so you could render these two arrays in javascript from php in your template, and then switch the dropdown data on click of the checkbox. You could have the arrays named with the id's of the CPT's, e.g. cpt-134 and then on click the CPT, set the dropdown data to the array named cpt-[id-of-cpt]. One way to get this data into your javascript is, if you e.g. have a general.js:

wp_register_script('general', get_template_directory_uri() . '/js/general.js');
wp_localize_script('general', 'myVars', array(
  'site_url' => site_url(),
  'dropdownData' => get_CPT_Dropdown_Data(),
));
wp_enqueue_script('general');

You would ofcourse have to write that function get_CPT_Dropdown_Data() that returns the arrays with the taxonomy data, based on the CPT id's.

2. On click on the CPT, call an ajax function that you have made that retrieves the taxonomies for that CPT. Then update the dropdown with that data.

Option 2 is a more future-proof method (if things get bigger) and will not bloat your code with data that might not be needed. But it will add round trips to the server, so you might want to incorporate feedback for your users for when the loading starts.