[Resolved] need help with javascript solution in forms

[Author]

Posts

[yvonneJ]

Hi,
some time ago, you helped me with listing all posts at once in a relationship form.
https://toolset.com/forums/topic/relationship-form-5/

I added javascript and some css, but I cannot save the relationship.
this is where it goes wrong:

<div class="form-group keus">
[create_shadow_parent_field]
<div class="hid">[cred-relationship-role role='child']</div>
</div>

[create_shadow_parent_field] replaces the normal list of posts in a list of all posts.
hid {display:none;}

javascript:

jQuery( document ).ready(function() {
var preSelectedVal = jQuery('#cred_association_zorgaanbieder-nascholing_parent').find(":selected").val();
jQuery("select#nascholing_parent_selector").val(preSelectedVal);

jQuery('select#nascholing_parent_selector').on('change', function() {
var selectVal = this.value;
var selectText = jQuery(this).find("option:selected").text();
if( selectVal > 0) {
jQuery('#cred_association_zorgaanbieder-nascholing_parent').find('option').remove();
jQuery('#cred_association_zorgaanbieder-nascholing_parent').append(jQuery('<option>', { value: selectVal, text: selectText }));
}
else
{
jQuery('#cred_association_zorgaanbieder-nascholing_parent').find('option').remove();
}
});
});

function:
add_shortcode('create_shadow_parent_field', 'create_shadow_parent_field_func');
function create_shadow_parent_field_func() {

$parent_post_slug = 'nascholing';
$relationship_slug = 'zorgaanbieder-nascholing';

$current_post = do_shortcode('[wpv-post-id]');

// get parent posts which are already connected
$get_results = toolset_get_related_posts($current_post, $relationship_slug, 'child', 9999, 0, array(), 'post_id', 'parent');

// get all the parent posts
$args = array(
'post_type' => $parent_post_slug,
'posts_per_page' => -1,
'post_status' => 'publish',
);

$posts_array = get_posts( $args );
// create a custom select field from the available parent posts, which are not already connected
ob_start();

if(!empty($posts_array)) {
echo '<select id="shadow_parent_selector" name="shadow_parent_selector"><option value="">Kies uit de lijst</option>';
foreach ($posts_array as $result) {
if(!in_array($result->ID, $get_results)) {
echo '<option value="'.$result->post_title.'">'.$result->post_title.'</option>';
}
};
echo '</select>';

}

return ob_get_clean();

}

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

To troubleshoot this, I'll need to see exactly how this custom code and the form are set up in the admin area.

Can you please share temporary admin login details, along with the link to the page with this form?

Note: Your next reply will be private and making a complete backup copy is recommended before sharing the access details.

regards,
Waqar

[Waqar]

Thank you for sharing these details.

During troubleshooting, I noticed that in your relationship form, the shadow relationship field is being used for the child post type in the relationship, whereas in the support thread where I shared the example code, it was being used for the parent post type.
( ref: https://toolset.com/forums/topic/post-relationship-form-select-only-showing-10-items/ )

Because of this difference, the following changes were needed:

1. In the custom field's shortcode, I've changed line# 18,

From:

$get_results = toolset_get_related_posts($current_post, $relationship_slug, 'child', 9999, 0, array(), 'post_id', 'parent');

To:

$get_results = toolset_get_related_posts($current_post, $relationship_slug, 'parent', 9999, 0, array(), 'post_id', 'child');

And the line# 35,

From:

echo '<option value="'.$result->post_title.'">'.$result->post_title.'</option>';

To:

echo '<option value="'.$result->ID.'">'.$result->post_title.'</option>';

2. Likewise, in the custom script added in the relationship form "Toevoegen schooling", I changed the field names, so that the code becomes:

jQuery( document ).ready(function() {
    var preSelectedVal = jQuery('#cred_association_zorgaanbieder-nascholing_child').find(":selected").val();
    jQuery("select#shadow_parent_selector").val(preSelectedVal);
     
    jQuery('select#shadow_parent_selector').on('change', function() {
        var selectVal = this.value;
        var selectText = jQuery(this).find("option:selected").text();
        if( selectVal > 0) {
        jQuery('#cred_association_zorgaanbieder-nascholing_child').find('option').remove();
            jQuery('#cred_association_zorgaanbieder-nascholing_child').append(jQuery('<option>', { value: selectVal, text: selectText }));
        }
        else
        {
            jQuery('#cred_association_zorgaanbieder-nascholing_child').find('option').remove();
        }
    });
});

After these changes, the form's shadow select field is working as expected.

Note: The custom code examples from our forum are shared to get you started in the right direction. You're welcome to adjust them as needed and for more personalized customization assistance, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

[yvonneJ]

My issue is resolved now.
I'm very greatful Waqar! Thank you very much for your help. Have a nice day.