A solution to sync select boxes in CRED form without using multi step forms

This thread is resolved. Here is a description of the problem and solution.

Problem:
A Toolset Form contains two select fields where the choices in the second field are dependent on what is selected in the first field. Is there any way to connect the two so that the second select field updates according to what is chosen in the first?

Solution:
This requires a custom solution, which would involve building an array mapping the relationship between the options in the two fields in PHP, and then passing that array to the front-end using wp_localize_script, and then using a bespoke JavaScript solution to connect the two select fields accordingly.

This is explained in a little more detail below:
https://toolset.com/forums/topic/a-solution-to-sync-select-boxes-in-cred-form-without-using-multi-step-forms/#post-915230

This support ticket is created 6 years, 5 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	7:00 – 14:00	7:00 – 14:00	7:00 – 14:00	7:00 – 14:00	7:00 – 14:00	-
-	15:00 – 16:00	15:00 – 16:00	15:00 – 16:00	15:00 – 16:00	15:00 – 16:00	-

Supporter timezone: Europe/London (GMT+00:00)

Tagged: Content-submission forms, Toolset Forms

This topic contains 1 reply, has 2 voices.

Last updated by Nigel 6 years, 5 months ago.

Assisted by: Nigel.

Author

Posts

June 19, 2018 at 9:07 am #915143

cristianM-3

I have a form that adds reviews for surgical operations.

I have to select from a list of surgeons and, in the same step to select one of their procedures.

I'm trying to find a solution to sync the procedure select box in the CRED form to contain only the procedures performed by the surgeon selected in the previous select box.

My customer does not want to use multi-step forms so I probably have to populate the 2nd select box using javascript immediately after choosing the surgeon in the 1st select box. This should be a pretty common request. I don't want a ready-made solution, just to be put in the right direction.

Thank you
Cristian

June 19, 2018 at 12:27 pm #915230

Nigel

Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Hi Cristian

You'll need to write a little PHP that builds an array of the surgeons together with their procedures, then pass that to the front-end so that you can use JavaScript (or jQuery) to manipulate the second select field based upon the choice of the first.

You can use the wp hook for your PHP code (https://codex.wordpress.org/Plugin_API/Action_Reference/wp) where you can test which page you are on to only add this where required.

Your code will need to use wp_localize_script to make the surgeon-procedures array available on the front-end (hidden link).

You'll then add an event listener to the surgeon drop down field to trigger updates in the second field when the first is changed (hidden link).

Obviously you will want to take care in creating the array in PHP that the values correspond with whatever is required to match up with the select options in the front end.

Is that enough of an outline to get you started?