Forums

Show a GIF on loading the form, and hiding the Submit btn

SPABO 29 Nov, 2018
Hi,
How to set up loading a GIF when the form is sending, but at the same time hiding the submit button

I realize we made this work in CFv4, but now I wish to make this work in CFv5

Hope you could help..
healyhatman 29 Nov, 2018
Could always just skip v5 and go straight to v6
SPABO 29 Nov, 2018
Hi,
This is not my preference, pls advise how to set up in V5
Thanks in advance
Rgds
healyhatman 29 Nov, 2018
I don't actually know enough about CFv5 to help you I only do v6😀 Might have to wait for Bob.

Or have a look at the FAQs. https://www.chronoengine.com/faqs/70-chronoforms/cfv5/5256-how-do-i-show-a-loading-image-when-the-form-submits-in-cfv5
SPABO 29 Nov, 2018
Hi Bob,
It works (almost) fine.

It hides the button, it shows the loading image, but not the text

Please wait while the form submits

Pls advise
GreyHead 29 Nov, 2018
Hi Kees,

Please post a link to the form so we can take a quick look.

Bob
SPABO 29 Nov, 2018
Hi Bob,

Pls find the link https://www.xxxxxx/xxxxxxxxxx/xxxxxxxxxx (changed!!)

This is just for a testing...

Hope you had a change to l;ook at it, I'm about to depublish
SPABO 02 Dec, 2018
Answer
Hi Bob,
It;s working now, there were too many <div> in the design area
Pls find what I have put in, including hiding the reset-button
In the SetUp part, OnLoad

In the HTML (renderform)
Put in Form Class: chronoform
Put in the Form Tag Aattchment: data-gvalidate_success='showLoader'

Load a Load JavaScript Function in the OnLoad Part and put in:
function showLoader() {
jQuery('#loading').show();
jQuery('#submit_btn').prop('disabled', true);
jQuery('#reset_btn').prop('disabled', true);
jQuery('#chronoform-my formname div:not(:last-child)').hide();
}
In the Designer Area.
The Button ID's (re)named to: submit_btn, resp. reset_btn
The loading image comes from the my own (Joomla)image folder.
The customcode must be at the end of the Designer area
<div id='loading' style='display: none'; >
<center><img src='/images/stories/my image.gif' /></center>
<br>
<br>
<center>Een ogenblik geduld, het formulier wordt nu verstuurd</center>
Thanks so far Bob

Rgds Kees
This topic is locked and no more replies can be posted.