loading.gif on "SUBMIT"

"Sometimes it takes a while to submit a form through the validationprocesses. In such cases users could press the button SUBMIT twice and thus could it happen a form is submitted twice.

To prevent I wish to have the loading.gif picture shown untill the form has been submitted

But how can I do this ?
This is the formcode for the submit button

<div class="ccms_form_element cfdiv_submit" id="autoID-4e20dbb568aa715b9ec59ab27998c1ab_container_div"><input name="submit" class="" value="Verstuur" type="submit" />

Loading.gif is kept in folder "/images"

Hi SPABO,

There's an old CFv3 thread of Fredrik's here that may help. I'm sure I did one for CFv3 too but I can’t find it right now :-(

Or, I have an Anti Flood [GH] action that will block multiple submits of the same form.

Bob

Hi Bob,
The AntiFlood action is already captured in the form validation

I tried to get Frederiks solution wordking, but the tag

    onSubmit="$('pleasewait').setStyle('visibility', 'visible');"

will not be saved in the general tab , filed "Form tag attachment"

I think I found your version for V4
http://www.chronoengine.com/forums.html?cont=posts&f=7&t=17717&p=267926

I reponded on thsi, but not sure how to move this topic to Q&A....

It works now Bob!
Picture is called : loader.gif and in folder images/stories
In the HTML (custom)code

<div id="loading" style="display: none">Een ogenblik geduld a.u.b. Bezig met verzenden !!!<img src="images/stories/loader.gif" alt="" /></div> 

Pls bear in mind to amend the id AND name of the submit button eg. "input_submit_1"

Tehn in the Events "JS load"

    window.addEvent('domready', function() {
      $('input_submit_1').addEvent('click', function(){
        $('loading').setStyle('display', 'block');
      });
    });

Note:
You need to play around where the loader.gif and text will be shown on the frontend

Case closed

Hi SPABO,

Well done for finding my post and getting it to work :-)

Looking at the code it might also help to disable the submit button at the same time:

window.addEvent('domready', function() {
  $('input_submit_1').addEvent('click', function(){
    $('loading').setStyle('display', 'block');
    $('input_submit_1').disabled = true;
  });
});

Bob

Wow, even better !!

Thanks again Bob !!

Bob, Sorry for getting back to you.
There is a "problem".

In my form forms I have "required" fields, but when you forget to fill out a required field, the "Wait for sending" message and the loader.gif do already appear.

In other words, I wish to have the "wait for sending"message only to appear when it's really sending/submitting (thus when all fields are filled in)

(Note the V3 solution as mentioned in the earlier topic works okay)
First "error-messages" without showing the on load message

Hi SPABO,

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

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.

Bob

*I found that this worked by chance, normally you can't set the FormCheck parameters so easily and I was going to use my Show HTML [GH] action which has a box for FormCheck options.

*I found that this worked by chance,

So are the most great inventors come on the right track. Bell, Edison, you name them!

I have implemented the code now in a couple of form, and everything is working nicely!

Hope one day V4 will work in IE8 as well :wink:

Hi,

I'm updating this thread to add a little more functionality asked for in another thread.

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>

Amend the Load JS action code to

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

You could also use

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

which will hide the form and close up the empty space.

You can change the test of the Submit button with this line:

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

Bob

The latest version is now in this FAQ

Hi There,

I've attempted to follow the FAQ on this and am getting an odd result in the following form:
http://goodcopyenews.com/index.php?option=com_chronoforms&chronoform=sendfile_LOADING_TESTS

Somehow, a bit of the code is showing on the front end (above submit/reset), and the implementation of this changing the styling of my bottom row modules (white boxes).

Also, the desired functionality is not working.

It is likely that I've missed something. Any guidance would be greatly appreciated.

-Todd

Hi Todd,

It looks as though you have the JavaScript in a form element instead of the Load JS action. Please see this FAQ

Bob

I'm not seeing my error.

I've added this bit to a custom code action in the OnLoad event.

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

and this bit in a Load JS action OnLoad.

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

Then I've added these two to the form as form elements on the preview tab before and after the elements I wish to hide.

<div id='hide_me' >

function showLoader(){
  $('loading').setStyle('display', 'block');
  $('submit_btn').value = 'Processing . . .';
  $('hide_me').setStyle('display', 'none');
};

What have I done wrong?

Hi goodcopy,

I tried to take a look but the link you posted doesn't seem to go to a form anymore.

Bob

I, i changed the form name. Here it is: http://goodcopyenews.com/index.php?option=com_chronoforms&chronoform=test

Hi Todd,

It still looks as though you have the JavaScript in a form element instead of the Load JS action. Please see this FAQ

Bob

Like this?

<?php
$script = "
      function showLoader(){
      $('loading').setStyle('display', 'block');
      $('submit_btn').value = 'Processing . . .';
      $('hide_me').setStyle('display', 'none');
    };";
$doc =& JFactory::getDocument();
$doc->addScriptDeclaration($script);
?>

Hi you need to drag from Utitilities> Load JS > On Load ( in EVENTS)

Go to the form and click on WIZARD, then on the tab "EVENTS"

On the left side , open Utilities
Drag Load JS to the "On Load" part, this Load JS should be before the show HTML

The code should be pasted in the Load JS event!

Thanks, SPABO. But that is where I've placed my javascript, to no avail.

I;m about to say : fine, it;s up to you

But.....a Custom Code is not the same as Load JS!

Pls read our messages and FAQ's more carafully

Custom Code is in the CoreActions, you need to look in UTILITIES , there you can find Load JS

And JavaScripiting is not PHP scripting

Whoa. That seemed prickly. I'm very new to this type of work and am trying to understand. I thought I had followed the original FAQ appropriately.

Hi goodcopy,

It seemed to me from your post that you have done pretty much exactly what SPABO suggested . . .

Looking at the form page again I can see a couple of things.

a) the JavaScript function showLoader() is defined twice.

b) There doesn't seem to be a span or div with the id='loading' to contain the loading image.

Bob

Bob,

I've figured out my error. I was following your FAQ as posted on your website, perhaps a bit too literally.

There, it seems to be missing the instruction to add the closing div tag into the second custom code. In fact, it looks more like the suggestion is to add the following bit of code to the second custom code.

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

I thought this odd, but I am pretty new to this. Your mention of the JavaScript function showLoader() being defined twice is what clarified it. Thank you for your help.

Hi goodcopy,

Sorry mea culpa :-(

That second one should just be </div>

I've updated the FAQ. Thanks for letting me know.

Bob

Hi Bob,

In addition, for those who have a Custom Form, and thus should make it work in the HTML Coding end want to see a "Loader picture"

This for showing the picture

<div id="loading" style="display: none"><span style="font-weight: bold; color: rgb(39, 39, 197);">Een ogenblik geduld a.u.b. Bezig met verzenden !!!<br><br>
<div style="text-align: center;"><img src="images/stories/287.gif" alt="" /></div><br></div>

Fontstyle and path are as they are in my forms ofcourse

For the submit button, it would be like this:

<div id='hide_me' >
<div class="ccms_form_element cfdiv_submit" id="input_submit_1"><input name="input_submit_1" class="" value="Verstuur" type="submit" />
 <input type='reset' name='reset' value='Herstel' /><div class="clear"></div><div id="error-message-submit"></div></div></div>

Custom code in the "OnLoad Action"

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

Load JS function in the "OnLoad Action"

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

Hope this could be of any further help!

Might anyone have any insight as to how to present the "loading" div in a multiBox?

Hi goodcopy,

It's linked to the Submit button so I think that the code in the FAQ should still work OK.

Bob