[Gelöst] Using jQuery to populate a relationship field in a form

[Author]

Artikel

[alexG-4]

I need to be able to force a post-selection field in a form (for setting a relationship) to take a specific value (in both New and Edit forms).

In effect, I want to be able to simulate a user making a selection, before they press Submit.

I've carefully examined the HTML of a selection field group before and after a value is selected, and I've written jQuery code that changes the HTML from what it looks like when the field is un-populated to what it looks like after a value has been selected.

After the jQuery is run, the field looks to be properly populated, and when I examine the HTML, it all looks to be correctly changed. However, when I submit the form, it reacts as if that field has NOT been populated.

What else do I need to do to be able to simulate the selection?

Note that I also need to do this with Generic Select fields, and this works fine.

Thanks.

Alex

[Beda]

I don't understand, you want to let the user select a value, but in fact, force the value anyway?
In this case, I recommend simply not showing that field and setting the relationship in another manner (by code, for example, or set default value).

If you for some reason need the user to "believe" to be selecting something, but in fact, you will save a given value anyway, you could also just produce a simple "dummy" HTML selector, let the user play with that, and in the background save what you need.

This could be done by hooking a custom Toolset Relationships API Code to cred_submit_complete() hook in the form
https://toolset.com/documentation/programmer-reference/cred-api/#cred_submit_complete
https://toolset.com/documentation/customizing-sites-using-php/post-relationships-api/

I can help with an example of such code, that would, for example, connect the current edited or created post to a given post of another kind in the relationship.

For this, I'd need some more details as what kind of relationship it is (single, O2M), and other details like on what Post Form and to what posts the code should connect the posts.
I can then craft an example, or show an existing one if matching, which you then can adapt to your site.

Note, we cannot craft for Toolset Relationship Forms, because those forms lack an API.
So if the Relationship is of a Many To Many (M2M) kinds, you cannot apply such code as those are connected in Relationship Forms.
Toolset Forms also lack an API to alter the native Select2 Field, the only variables that can be controlled, are the ones you can set in the Form Editor, when inserting the connection fields (Such as author, order)
However, I think you have an O2M or O2O relationship, as you mention "create post forms", wherein those 2 types of relations, you can select a parent post.

[alexG-4]

Hi Beda

What I'm trying to achieve is similar functionality to what toolset provides on the backend: when you create or update a post and there is a relationship field to populate, you get the option to choose an existing post (on the other end of the relationship) or create a new one.

The video shows what I'm trying to do.

versteckter Link

I'll be making use of jQuery and Ajax, but for the moment I'm focusing on making the jQuery work.

The mechanism works fine for Generic Select fields, but not for normal Select fields.

The image below shows how I adjust the HTML of the normal select field group (using jQuery) to make it the same as when the user makes a selection.

As you can from the video, this DOES populate the field on the form, but when I submit the form, it behaves as if the field is NOT populated at all.

I hope you can help with this.

Thanks

Alex

[Beda]

I understand.

This requires advanced code that we cannot provide here.
You could ask for this feature to be added here https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/ or hire a contractor from here https://toolset.com/contractors/ if you'd need professional coding help.

Replicating the "add new or connect existing" is natively not added in Toolset and it would require a lot of coding adding that in Forms.

Relational Fields to choose other posts are SELECT2 fields while generic Fields never save to the database and are not SELECT2.
The whole markup, JS and actions ligated to Relational fields are simply not present on Generic Fields, and that is why the code fails on the Select2.
There are actions that populate those fields and accordingly update the post after the native hooks of WordPress, and Toolset does not offer an API for altering those.

However, your goal should be achievable with simpler approaches.

You could have the parent selector as is, just like the Backend, and if the user does not find a post, then (just like in the backend) you add a Link, or even modal that calls a form to add such post and redirects back to the connection form you want the user to use.
This would be precisely as in the backend and relatively simple as you would not need to customize the Toolset Select2 fields and queries.

Please let me know if such a workaround would help as with that I could help, given it involves mainly only Toolset features and there will be no need for large custom code sets.

[alexG-4]

Thanks Beda

Let me see if I understand your suggestion...

User clicks the "Add New" link.
The "New Topic" form appears in the modal window.
User completes the form and clicks submit.
The new topic gets created.
User closes the modal window and again sees the original form.

There is no Ajax processing. The "Select a Topic" field remains unpopulated.

However, the user can now select the newly-created Topic from the field's dropdown because it dynamically generates the content, and so includes the newly-created Topic when the user clicks in it.

If that's your suggestion, then I don't think there's anything more to do than what I described above, is there?

I won't need to write any code or use any API, as far as I can see.

Is that right?

But for the Generic select (which I use for a List Type), I think I'll have to continue with my original mechanism, because the content in the drop-down is created when the form is loaded, NOT when the user clicks in the field. Right? So if the user creates a new List Type via a modal window, the user will NOT see it in the drop-down - so I WILL have to populate the field with the new List Type details using Ajax.

Have I got that right?

Alex

[Beda]

This is correct. Note that you can always also reload the form /page after form submit and hence force an update as well (since it'll reload the form wit fresh data).

In Generic, or non-relational fields, where it's content cannot be searched like in Select2, the only chance to populate that dynamically is to use custom Code or ShortCodes to populate the options (generic Field as that option). Then, you must reload the form or at least push the updates with AJAX to the form - but that is not something natively supported in the Forms.

[alexG-4]

Thanks, Beda.

That helps me work out what approach to take.

My issue is now resolved.

Alex

[Beda]

Always welcome 🙂

Please let me know if something won't work out as planned, forms in modals (are, can be) complex.

[alexG-4]

Hi again, Beda!

I've not had any problems with modals yet, but I've realised, I don't know how to re-load the form!

I can figure out the details, once I know the principles.

I assume it must be something like this...

Trigger an Ajax call.
Generate the form-display HTML in php
Pass that back to jQuery
Replace the original form code with the new HTML

What I'm unsure of it how to generate the form-display HTML in php.

Would I use do_shortcode?
Or is it something else entirely?

Thanks!

Alex

[Beda]

There is no inbuilt Toolset Forms setting to "Reload the Form", however with the existing redirection settings in each form (redirect to a page, redirect to post, etc), you can easily redirect to the very page where the form is inserted to - resulting in what seems a reload of the form (but in fact it reloads the page).

Since you do not have the form on a static page but likely (at least the edit forms) on each post, you cannot use the native GUI settings as there isn't any "redirect to current post".
But you can use the API hook here https://toolset.com/documentation/programmer-reference/cred-api/#cred_success_redirect, to customize the redirect even more, so, for example, to redirect to a dynamic URL such as the currently edited post, or else.

Note, when using AJAX, and redirects, the redirect will make the page reload even if you use AJAX submits (the experience will not be without any Page reload, as one could expect hearing "AJAX Submit")

[alexG-4]

My issue is resolved now. Thank you!