Forums

Loading image when submit form

FloB 25 Apr, 2016
1 Likes
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
GreyHead 26 Apr, 2016
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
GreyHead 26 Apr, 2016
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
FloB 26 Apr, 2016
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
GreyHead 26 Apr, 2016
Answer
Hi Florence,

Hmmm the form reloaded with no message and when I check the HTML I see method='post' - but if it is working.

Will your final form have any elements that are validated? If so then the code should work. Please test by adding just a required text element.

Bob
FloB 26 Apr, 2016
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
GreyHead 27 Apr, 2016
Hi Florence,

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

Bob
koppie7 27 Apr, 2016
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
FloB 27 Apr, 2016
Thanks for the pop-up, that's nice😀
This topic is locked and no more replies can be posted.