How do I show a 'loading' image when the form submits in CFv5?

Written May 4, 2015 10:10

Some forms take a little time to submit, particularly if there are files to be uploaded. This FAQ shows you a way to show a 'loading' image and/or a message to remind the user to wait.

You want the image to show after the submit button is clicked but only if the form validation has succeeded. To do this open the HTML (Render form) action and in the Form tag attachment box enter this code:

data-gvalidate_success='showLoader'

This tells ChronoForms to run the showLoader() function when the validation succeeds.

Now drag a Load JavaScript action into the On Load event and move it up before the HTML (Render form) action. Open it and add code like this to the JS Code box:

function showLoader() {
  jQuery('#loading').show();
  jQuery('#submit_btn').prop('disabled', true);
  jQuery('#chronoform-my_form_name div:not(:last-child)').hide();
}

Replace my_form_name with the name of your form.

In the Designer tab of your form edit the Submit button and change the name and id to submit_btn

Drag in a new Custom Code element as the last element in the form, set Pure Code to Yes and add this code to it:

<div id='loading' style='display: none'; >
  <div>Please wait while the form submits</div>
  <img src='/components/com_chronoforms5/extras/ajax-loader.gif' />
</div>

Change the message to suit your form and replace the image path here with the path to your loading image.

Save the form and test.

Note: the JavaScript here does three things:

+ It shows the HTML from the Custom Code element

+ It disabled the Submit button to block any repeated clicks and duplicate submissions.

+ It hides all divs in the form except for the last one. This will work for a simple ChronoForm but may not work if you have Custom HTML or a complicated form. In that case you can remove this line.

FAQs