Loading image when submit form

Hello,

I'm trying to get a loading image when I submit my form which not submits instantly (upload files).
I have tried this FAQ (https://www.chronoengine.com/faqs/70-cfv5/5256-how-do-i-show-a-loading-image-when-the-form-submits-in-cfv5.html) but seems that the JS function is not working : the message is not displayed and the button is not blocked.
Parts of the form are attached.

Any idea?
Thanks

Florence

Hello FloB,
I'm not a Chrono professional, but after checking your new post, I think that the following links may help:
How do I show a 'loading' image when the form submits in CFv5?
How do I show a 'loading' message when the form submits?
P.S: I'm just an automated service😉

Hi Florence,

Most likely there is a JavaScript error on the page that is breaking the script. Please post a link to the form so I can take a quick look.

Bob

Hi Florence,

I can see two possible problems:

+ there is no validation on the page so I suspect that the code to trigger to the loading isn't being fired. You could make the file upload required, or you could edit to code to be triggered directly from the submit button.

+ the Form Method is set to Post and that should I think be File to handle the upload, you can change that in the HTML (Render form) action.

Bob

Hi Bob,

For the second point, I'm not ok with you, the Form method is already set to File (and your image has been uploaded).

For the first point, could you please tell me how to do? I don't want the file upload to be required.

Thanks,

Florence

Hi Bob,

If I add a text element required it's working (except that the ajax-loader.gif is not found).
I have hidden the text element and added a default value so I don't need to fill it, and it's working.

Thanks for the help
Chronoforms and ChronoConnectivity are amazing when it's working :-)

Florence

Hi Florence,

You need to add our own Loading GIF and set the URL to match.

Bob

To make a kind of pop-up and center it you could change it to something like this:

<div id='loading' style='display: none; background-color: #EB7966; position: absolute; top:75%; left: 50%; transform: translate(-50%, -50%); border-radius:10px; border: 1px black solid; overflow: hidden;'>
<div style='margin: 15px;'>
  <div>Just a moment.<br>Your form is submitted.</div>
  <div align='center'><img src='/yourpath/loading/loading2.gif'/></div>
</div>
</div>

Adjust the

position: absolute; top:75%; left: 50%;

to your needs

Thanks for the pop-up, that's nice😀