How do I show a 'loading' message when the form submits?

Written Feb 20, 2013 03:36

With a little work you can attach a loader image to the validation 'onSuccess' event.

Add a Custom Element element to your form, open the configuration and check the 'Pure Code' box, then add code like this to it:

<div id="loading" style="display: none" >
  <div>Add message here</div>
  <div>
    <img src="url_of_image/loading.gif" alt="" />
  </div>
</div>

You can change the message, the image URL and add CSS to suit your form.

Add a Custom code action to your form OnLoad event and put this code into it*:

<?php
$form->form_params->set('jsvalidation_onValidateSuccess', 'showLoader');
?>

In a Load JS action add this code:

function showLoader(){
  $('loading').setStyle('display', 'block');
  $('submit_btn').disabled = true;
};

Note: the submit button id 'submit_btn' is different here. It needs to match the id in your form HTML.

To hide the form or part of the form on submission add two Custom Elements and drag them before and after the section you want to hide - the loading gif div should not be inside!

Click the Pure code box in both Custom elements; in the first add

<div id='hide_me' >

and in the second add

</div>

In the more recent ChronoForms releases you could use a Container element to create this group.

Then add this line to the showLoader function to hide the form and close up the empty space:

$('hide_me').setStyle('display', 'none');

And if you want to change the text of the Submit button add this line:

$('submit_btn').value = 'Processing . . .';

FAQs