[Resolved] Show popup on form before validation

[Author]

Posts

[himanshuS]

I have a form that has a decent amount of custom processing on form submit that takes around 5-7 seconds to complete. It all works well and the user is eventually directed to the post (as intended) after the processing completes.

I have hooks on cred_save_data and cred_form_submit_complete so the user does not see any message while the system works in the backend. I was wondering if there is a way to show a custom popup that shows a sand timer or an animation when the user clicks on the submit button and disappears when the user gets directed to the new page?
I was thinking of creating a popup in elementor (or anywhere else) and calling it in the cred_save_data hook (priority high) but I am not sure what is the right way to do that. Also, I don't know if there is a better way to show the popup without custom code.

The ticket was recreated because the previous one was outside US time.
https://toolset.com/forums/topic/show-a-popup-on-form-submit-before-redirection/

The proposed solution to enable AJAX submission does not work because images are saved again when using AJAX. This has been verified here: https://toolset.com/forums/topic/uploaded-image-is-lost-when-editing-a-post/

Please advise.

[Christian Cox]

I was thinking of creating a popup in elementor (or anywhere else) and calling it in the cred_save_data hook (priority high) but I am not sure what is the right way to do that. Also, I don't know if there is a better way to show the popup without custom code.
The cred_save_data hook and other CRED API functions are all PHP (server-side) hooks, so you can't really trigger JavaScript functions on the Form page with those hooks. There is no public JavaScript API for Forms so I don't have any custom event hooks available for Form submission, but a simple jQuery submit listener might be useful for triggering your own custom JavaScript function: https://api.jquery.com/submit/

Add code in the callback function to display a loading modal. For example, this code listens for the submit event of a Form with ID 123:

jQuery('#cred_form_123_1').submit(function(e){
  // add your own code here, or call an external function to display a custom popup or modal
  // example: alert('go'); will display a native browser alert and block submission until the user confirms by clicking OK
});

If the Form uses AJAX, you might be able to use global AJAX event handlers to hide the modal or popup after the AJAX process is complete or upon failure. These kinds of customizations fall outside the scope of our support forums: https://api.jquery.com/category/ajax/global-ajax-event-handlers/

[himanshuS]

Chris,

As usual, rock-solid feedback. Thanks a lot, man!

I will try this and get back to you soon.

[Christian Cox]

Thanks, I will stand by for your update.

[himanshuS]

My issue is resolved now. Thank you!