[Resolved] Ajax refresh of a form to update fields based on a selection made within form

[Author]

Posts

[Doug Watt]

Tell us what you are trying to do?

The site is built for a printer who has corporate clients who are able to login to their own pages within the site. I have built a number of forms using CRED so that they are able to submits orders for stationery. I have a number of these all working well. However on the latest one, I want to do something different.

The client is a private hospital with a number of clinics all around the country. I have created a Post Type called "Fresenius Clinics" which contains information such as street address, state, post code, phone, email, etc which I want to draw upon in the order form.

I have created a one-to-many relationship between Fresenius Order and Fresenius Clinic - so that one order can only relate to one of many clinics, but any clinic can relate to many orders. (Having done that, I'm not sure that it's necessary as there is a "reference relationship with the clinics).

When the client accesses the form (to create a post called "Fresenius Order"), one of the first things they do is select the desired clinic from a dropdown menu. At that point, I'd like to populate and display a number of fields in the form drawing data from the relevant "Fresenius Clinic" post, eg addresses, etc.

Is it possible to do an AJAX refresh of the form after the selection of the relevant clinic to force the display of these other fields. Or is it possible to create a two-page form? I can't see any documentation on either of these ideas.

NOTE: In the uploaded image, don't worry about the "There is a problem with bond-business-card-quantity-1 field. Please check CRED form." That's not the issue. I'm using a copy of a previous form and haven't updated those fields yet. The "problem" is that there isn't any address fields showing where the comma is currently right next to the dropdown selector.

Is there any documentation that you are following?
Forms documentation - but I can't find relevant info.

Is there a similar example that we can see?
No.

What is the link to your site?
hidden link

Many thanks, Doug
=================

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

An ajax update to the form after selecting the parent clinic would require a bespoke coded solution.

But a two page form may work.

You can implement multi-part forms in Toolset by creating an initial form to publish a post (page 1 of the form) which is then chained to an edit form (or several, if the form has several steps or "pages").

So on the initial form the user chooses a parent, clicks to go to the next step, which actually submits the form and publishes the post, and is redirected to a form that edits this post, and this post is now a child of a clinic, so can reference fields of the the parent clinic.

Does that sound like a viable solution?

To create a multistep form you need to choose to display the post after submitting the form then use the API hook cred_success_redirect to append the URL parameter content-template-id with the ID of the template that contains the edit form (see https://toolset.com/documentation/programmer-reference/cred-api/#cred_success_redirect).

In the edit form you can reference parent fields by adding the item attribute to the shortcodes used to output the fields (you can easily specify the parent if you use the Fields and Views button to insert the fields).

[Doug Watt]

Many thanks, Nigel. I'll work on this first thing in the morning. I'm surprised that there's no documentation on the multi-form solution as it seems like it might be the solution here.
If I can make it work, it'll solve a number of cases for me.
I'll let you know how it goes.

Doug
====

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi Doug,

Please take your time and let us know if you have any follow-up questions.

regards,
Waqar