[Resolved] I want to assign a child post from a dropdown list programatically in JS

[Author]

Posts

[igorL-3]

Tell us what you are trying to do? I want to assign a child post programatically from a dropdown list. I have a following Relationship Form.

[cred-relationship-form-container]
<div class="form-group hidden">
<label>[cred_i18n name='child-label']Dog[/cred_i18n]</label>
[cred-relationship-role role='child']
</div>
<div class="form-group">
<label>[cred_i18n name='parent-label']Breeder[/cred_i18n]</label>
[cred-relationship-role role='parent']
</div>
[cred-form-feedback field='feedback' name='feedback']
[cred-form-submit field='submit' name='submit' class='breeder_submit']
[cred-form-cancel field='cancel' name='cancel']
[/cred-relationship-form-container]

The Specific Dog is passed on from a Post Form and is hidden. The DIV
<div class="form-group">
<label>[cred_i18n name='parent-label']Breeder[/cred_i18n]</label>
[cred-relationship-role role='parent']
</div>

creates a dropdown list of Breeders (this is a many-to-many relationship as each dog may have more than one breeder assosiated and clearly a breeder may have more than one dog)

so now I want to pick the Breeder in JS. I have used:
document.querySelector('#toolset_select2-cred_association_dam-dog-dog_child-container').textContent="Breeder Name";

where "Breeder Name" is a value that does exist in the dropdown list. And the correct name does appear in the field after executing
.textContent="Breeder Name"; method.

But when I hit SUBMIT the message comes up saying that "This value is required". Picking a value manually by using the dropdown list works but not the .textContent method.

Is there any documentation that you are following? No

Is there a similar example that we can see? No

What is the link to your site? I cannot provide that because the side is only visible from my local computer as I'm developing the site locally

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Hello. Thank you for contacting the Toolset support.

I'm not sure how exactly you are passing the parent ID.

Can you please share problem URL where I can see the post-relationship form and tell me how exactly you are passing the parent as well as admin access details.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[igorL-3]

I’m passing the parent as per Type Template (see the attached screenshot). I’ve selected for "What should the form do?” "Connect a Person to a given Borzoi as a Breeder” and then for "Borzoi to add Person to” I selected "Use the current Borzoi” (Borzoi is the breed of Dog I was referring to to the initial question). The parent is passed on without a problem from a Post Form where I selected to display the post after submitting the Post Form

Unfortunately I’m unable to give you access to the site or page because this is a development site which is only visible on my computer. I haven’t uploaded it yet to a server.

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Can you please share bit more details.

To what field you want to auto select (parent / child) ?

As you shared - the current post, does that mean that you already set the parent and you want to auto-select child post?

[igorL-3]

I want to select only child post in the following field:

<div class="form-group">
<label>[cred_i18n name='parent-label']Breeder[/cred_i18n]</label>
[cred-relationship-role role='parent']
</div>

The parent field is passed from the Post Form and is hidden as:
<div class="form-group hidden">
<label>[cred_i18n name='child-label']Dog[/cred_i18n]</label>
[cred-relationship-role role='child']
</div>

i hide it with CSS as in .hidden {display:none}

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Ok.

You said:
where "Breeder Name" is a value that does exist in the dropdown list. And the correct name does appear in the field after executing
.textContent="Breeder Name"; method.
==>
So, the "Breeder Name is the value available under child dropdown - correct? And you want to automatically select the optoin "Breeder Name" by default automatically using JS - right?

[igorL-3]

>So, the "Breeder Name is the value available under child dropdown - correct?
Yes that's correct

>And you want to automatically select the optoin "Breeder Name" by default automatically using JS - right?
Well maybe not by default as I want to have a function I can call that would set the "Breeder Name" ie allow me to link a
the Dog Post with a Breeder post (it's a many-to-many relationship) but if I know how to set by default that may be enough.
But document.querySelector('#toolset_select2-cred_association_dam-dog-dog_child-container').textContent="Breeder Name";
didn't work

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Can you please try to add the following code to your post relationship form's JS editor.

jQuery(document).ready(function($){
  
  var $option = $("<option selected></option>").val('9999').text("Breeder Name");

$('#cred_association_dam-dog-dog_child').append($option).trigger('change');
  
});

Wheree:
- Please replace 9999 with your "Breeder Name" original post ID.

[igorL-3]

Thanks this is great. But it has disabled the submission button. What I mean is that it won't save when I click the submit button but if I pick manually from the dropdown list it does save

[igorL-3]

PS also it doesn't take the post according to the id but just takes the first entry from the list of the dropdown list

[igorL-3]

Sorry!! It was my mistake. I had the JS in two palces and it was overwriting it. It´s working now.

One more related question. If a user selects a post from a dropdown how can I get the ID and Post Title into the above JS.
The [wpv-post-id] and [wpv-post-title] get these but I´m not sure how to pass it to the JQuery

[igorL-3]

My issue is resolved now. Thank you!