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

SP

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..

he

healyhatman 29 Nov, 2018

Could always just skip v5 and go straight to v6

SP

SPABO 29 Nov, 2018

Hi,
This is not my preference, pls advise how to set up in V5
Thanks in advance
Rgds

he

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

Gr

GreyHead 29 Nov, 2018

Hi SPABO,

Please see this FAQ

Bob

SP

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

Gr

GreyHead 29 Nov, 2018

Hi Kees,

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

Bob

SP

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

SP

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

Forums

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