Skip Navigation

[Resolved] Nested forms, CRED select parent options, and AJAX

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

Problem: I have 3 CRED forms on the same page. These forms create Post Type A, Post Type B, and Post Type C. Post Type A is a parent of Post Type B, and Post Type B is a parent of Post Type C. I would like the user to be able to submit these forms without leaving the current page or reloading the current page. I would like the options in each form to update automatically whenever one of the forms is submitted, using an AJAX-style update, so the User can select the parent post they just created.

Solution: There is currently no JavaScript API for CRED, so there is not a good way to update CRED form inputs on-the-fly using AJAX. The best way to handle this in CRED is to use multiple forms on multiple pages. Another option is to enable only one form at a time on the page, and force the user to submit that form before moving to another form. Then refresh the page when the form is submitted. This will prevent a problem where users lose data in other forms.

Relevant Documentation: https://toolset.com/documentation/user-guides/cred-forms-for-child-content/

This support ticket is created 6 years, 9 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.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 10 replies, has 2 voices.

Last updated by romanB-3 6 years, 9 months ago.

Assisted by: Christian Cox.

Author
Posts
#550865

Hello,
I'm trying to build nested forms.

I have 3 custom post types : "Resume" and "Employer" are linked threw a many-to-many relationship child post type "Job".

One Job is related to one resume and one employer.
One Resume may be related to several Jobs.
One Employer may be related to several Jobs.

Now I have a front-end form where a subscriber may register his own Resume threw a CRED form.
Into this form, he has to fill all his Jobs, and for each job, add "begining date" and other fields.
The user should of course be able to add several jobs without leaving the page.

How should I set that up ?

Thank you.

#551045

The best way to accomplish something like this in Toolset requires two CRED forms. The first CRED form allows the user to create a Resume, but not Jobs. When they submit the Resume, you redirect them to a Resume page. On the Resume page, you show all the details of the Resume they created. Also on that page, you show a View of all the child Jobs of the current Resume. At first, this View will be empty because no Jobs have been created yet.

The other CRED form is also here on the Resume page. This CRED form will create a new Job - a child of the current Resume. When the user submits the Job CRED form, you can refresh the Resume page, and the View showing all the Jobs for the current Resume will update to show the Jobs they have added.

It's not exactly like what you described, because there's no good way to add a child post from within another CRED form - the page will have to be refreshed and information created in the parent form will be lost. The best way to handle it in Toolset is with separate forms. Let me know if you have any questions about this.

#551544

Please don't close this thread yet.
Thank you.

#551749

Sure, the ticket will remain open for 30 days pending an update from you.

#552203

Thank you.
This is pretty much what I need.
This solution would work fine to add Jobs, as asked.
So the user registers his Resume, then is redirected to his resume's page.
Now he needs to add his jobs, and for each job, his employer. Now his employer isn't registered yet.
So he must create a new employer... but needs to do it without leaving the page !
How could this be done ?
Thank you very much.

#552230

I can't think of a good way to manage Employers from the Job creation form on the Resume page. CRED is not designed to work as a single-page application - it is designed to work with full page loads. You need to be able to show new parent Employer options in a child Job CRED form after the user adds a new Employer. AJAX updates to CRED form inputs like this are not possible, so the only way to accomplish connected Employers, Jobs and Resumes in CRED is with multiple forms on multiple pages. I recommend a workflow like this:
1. Create Resume.
2. Redirect to Resume page, and show a list of Employers and Jobs related to the current User.
3. Choose an existing Employer and show the Employer page, or Create a new Employer and show the Employer page.
4. Show child CRED form on Employer page where user can create a Job.
5. Create Job, then refresh the Employer page to show all the User's Jobs for this Employer.
6. Return to step 4 or step 2.

#552241

Thank you.

That would be a really heavy way to add their resumes for the users... they'll add at least about 5 jobs... so that would be about 15 page loads for 1 resume ! (And I have about 5.000 resumes to register...)

I've seen on those posts that it may be possible to have several forms on a page thanks to a view loop ;
https://toolset.com/forums/topic/create-multiple-posts-with-a-single-cred-form-2/
https://toolset.com/forums/topic/multiple-edit-post-cred-forms-on-same-page/
Wouldn't that be a solution ?

#552243

You can place multiple forms on a single page. This is possible. The problem is that your forms are interconnected. The inputs on each form depend on the posts created by the other forms. You must reload the page in order to have the options for each form update.

It can cause your user to lose data if you allow the user to input information on multiple forms on a single page. For example let's say you have a single page with a resume form, a job form, and an employer form. The user begins by creating a Resume. The inputs are
-Resume name
-Date
-Personal Statement
-References
-Jobs

So the user fills out the other fields, then comes to the Jobs field. The user cannot create Jobs inside a Resume form - a Resume CRED form only creates Resumes. So the user has to look for the New Jobs form, somewhere else on the page. The Resume is not saved, but the form is filled out. Now the user starts creating a Job. They fill out the following inputs:
-Job title
-Job location
-Job responsibilities
-Number of subordinates
-Employer

They fill out these other fields, then get to Employer. They cannot find the Employer in a dropdown list in the Jobs form, so they must create a new Employer. The Job is not saved because the form was not submitted. Now they go to the New Employer form somewhere else on the page and begin filling out the Employer information.

At this point, the problem is that the user must save the Employer so that it appears in the Jobs form as an option in the parent field. The only way to have the option appear in the Jobs form is to refresh the page. There is no way to update the parent Employer options with AJAX. If you refresh the page, the user loses all the information they put into the Job and Resume fields because these CRED forms were never submitted.

#552424

It seems to me the whole point is in "There is no way to update the parent Employer options with AJAX."

In deed, if it were possible to update the main form field "employers" after having added the new employer, it would solve the problem. Is that function really impossible to set up ? Couldn't the CRED API or some custom development make this possible ?

Thank you.

#552653

Sure, it may be possible with custom code. CRED is not designed to work in a single-page application. It currently requires page loads and URL parameters. The CRED API is available for PHP, but does not offer a way to update options in other CRED forms with AJAX after submission. That would require a CRED API for JavaScript, which is not available. So if you want to build that core functionality it will require quite a lot of custom code. Here is a list of certified partners you could contact about this type of work:
https://toolset.com/consultant/
Frankly I do not think it's practical - it would probably be more cost effective to use a different post creation plugin that offers a JavaScript API and allows you to update form options using AJAX.

The best solution I can think of with CRED is to use multiple forms on multiple pages. The 2nd best solution I can think of is to force your users to work in only one form at a time. Disable or hide all other forms, and refresh the page after this form is submitted. This will update all the other form options, and prevent the problem where the user loses data when they submit a different form.

#553159

Thank you very much.
I'll consider in using a dedicated plugin like WP Job Manager.
Thank you.

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.