[Resolved] Post form will not submit using AJAX; always causes page to reload

[Author]

Posts

[ericE-4]

I have a post form that I have configured to submit using AJAX and display a message upon submit. The attached image shows how I have the form configured.

When the form is submitted, the page is refreshed and the message is now shown.

You can see the bug on this page: hidden link

The form is in the orange bar fixed to the bottom of the screen. Click the checkbox to show the submit button.

New threads created by Luo Yang and linked to this one are listed below:

https://toolset.com/forums/topic/got-some-warnings-in-the-log-which-seem-to-be-associated-with-toolset/

[Luo Yang]

Hello,

I have tried the same setting as your screenshot, it works fine in my localhost with a fresh wordpress installation + the latest version of Toolset Forms plugin.

So the problem you mentioned above is abnormal, please try these:
1) Make sure you are using the latest version of Toolset plugins, you can download them here:
https://toolset.com/account/downloads/

2) In case it is a compatibility problem, please deactivate all other plugins, and switch to wordpress default theme 2019, deactivate all custom PHP/JS code snippets, and test again

3) Also check if there is any PHP/JS error in your website:
https://toolset.com/documentation/programmer-reference/debugging-sites-built-with-toolset/

4) If the problem still persists, please provide database dump file(ZIP file) of your website, also point out the problem page URL and form URL, I need to test and debug it in my localhost, thanks
https://toolset.com/faq/provide-supporters-copy-site/

[Luo Yang]

Thanks for the details, I am downloading the files, will update here if there is anything found

[Luo Yang]

I can install your duplicator package in my localhost, to avoid other compatibility issues, I have disabled all other plugins and switched to default theme 2020.

I assume we are talking about the edit post form "Lodge Details Page Approval", I suggest you follow our document to setup the edit form link, for example:
1) Create a content template "edit-lodge", display the edit form shortcode:

[cred_form form='lodge-details-page-approval']

2) Edit any lodge post, in the post content, display the form link
[toolset-edit-post-link content_template_slug='edit-lodge' target='self']Edit %%POST_TITLE%%[/toolset-edit-post-link]

Test it in front-end, click the edit form link, and submit the form, it works fine, I can see the success message, see screenshot: succ.JPG

More help:
https://toolset.com/documentation/getting-started-with-toolset/publish-content-from-the-front-end/forms-for-editing/

[ericE-4]

I got the exact same result when I added the form to the page this way—the page reloads and doesn't show the message via AJAX. Here's what I did:

1. I created a content template ("display-approval-form-checkbox"). The content template contains only

[cred_form form='lodge-details-page-approval']

2. On the page template used for editing the post (a template built with Elementor) I used the Shortcode widget to display the Toolset content template I just created. The shortcode you gave me was wrong—it renders a link to edit the post or something...I don't want that, because the page being viewed already displays the post that is being edited. I want to display the actual form on this page, not a link to something else.

This is the shortcode I used to display the content template:

[wpv-post-body view_template="display-approval-form-checkbox"]

Previously I had used the Toolset Forms widget for Elementor to display the form on the page—should this not work?

[Luo Yang]

There is a misunderstanding, since the post form "lodge-details-page-approval" is a form editing post, so I recommend to follow our document to display the edit form link.

And it is possible the edit form in single lodge post directly, I have tested it with your duplicator package, with only Toolset plugins + 2020 theme.

it works fine, for example, edit the "Lodge" post, in post content, display the form shortcode directly:

<hr />
[cred_form form='lodge-details-page-approval']
<hr />

Test it in front-end, I can see the success message and no automatic refreshing, see screenshot edit-lodge.JPG

Can you confirm it in your website?

[ericE-4]

I finally figured out that the toolset forms script was not loading on this page—that was the cause of the problem. I was able to get it to load, and the problem is resolved. The Toolset Elementor Forms widget works fine.