Loading Message after submit

Ga

Gatsman 05 Jul, 2014

Hello again,
I want to display a message after submit and i am following this tutorial:
http://www.chronoengine.com/faqs/53-cfv4/cfv4-file-uploads/2560-how-do-i-show-a-loading-message-when-the-form-submits.html
i ve made it work in the past but now with V5 it gives an error i think its this code that needs changes:

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

ca

calculus00 05 Jul, 2014

Hello Gatsman,
I'm not a Chrono professional, but after checking your new post, I think that the following links may help:
How do I show a 'loading' message when the form submits?
P.S: I'm just an automated service😉

Gr

GreyHead 05 Jul, 2014

Hi Gatsman,

I haven't yet found a way of catching the on Submit event in CFv5 after the validation succeeds :-(

Bob

Ga

Gatsman 05 Jul, 2014

:(
Thank you for answering Bob.

Max_admin 06 Jul, 2014

Please try to use this code inside a JS action after the HTML action:


$(document).on("submit", "#FORM ID HERE", function(event){
event.stopPropagation();
event.preventDefault();
//your code here
});

This will interrupt the form submit after the validation has succeeded, this is for client side stuff.

Regards,
Max

Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.

Ga

Gatsman 06 Jul, 2014

Hi Max,
You lost me mate😟
Do i still follow that tutorial?

(my form id is 5 )

$(document).on("submit", "#5", function(event){
event.stopPropagation();
event.preventDefault();
//your code here - What code do i put here?
});

Gr

GreyHead 06 Jul, 2014

Answer

Hi Gatsman,

Max's code works OK but is a workaround - we still really need an onSuccess event in the validation. I got it working herelike this . . .

a) Add an id to the Submit Button - I used submit_btn in this case.

b) Add a Custom code element to the form with the same HTML as the FAQ for the loading image and remove the element label.

c) Add a Load JS action to the form On Load event and add this code to it replacing your_form_name with the name of your form:

jQuery(document).ready(function(jQ){
  var validated = false;
  var form = jQ('#chronoform-your_form_name');
  jQ(document).on('submit', form, function(event){
    if ( validated ) {
      return;
    }
      event.stopPropagation();
      event.preventDefault();
      showLoader();
  });
  function showLoader(){
    jQ('#loading').css('display', 'block');
    jQ('#submit_btn').prop('disabled', true);
    validated = true;
    form.submit();
  };
});

You'll see that this includes Max's code and the showLoader function from the FAQ updated to use jQuery in Joomla! 3.

The extra code using the 'validated' variable is to allow the form to be submitted normally after the loader is displayed. Without that it either never submits of just loops around re-displaying the loading image.

Bob

PS The will still re-run the form validation code after the loading image is displayed; normally that should not be a problem.

PPS The form id in this case is not the id shown in the Form Manager but the HTML ID which Chronoforms creates as 'chronoform-your_form_name' You can see this by looking at the <form> tag in the page HTML.

Ga

Gatsman 06 Jul, 2014

I found another similar solution for this in case someone else needs it.🙂

Add a loading div and a onclick function to your submit button in yourForm code like this:


<div id="loading" style="display: none;">
	<img src="images/loading.gif" alt="" /> Please wait!
</div>

<div id="buttons" style="display: block;">
// add onclick="myFunction()" to your submit input (button in my case)
	<button onclick="myFunction()" name="button3" id="button3" type="submit" value="save" class="" style="" data-load-state="">Save
	</button>
</div>

Add a Load Javascript after the HTML (Render Form) with this code:


function myFunction() {
document.getElementById("loading").style.display = "block";
document.getElementById("buttons").style.display = "none";
}

This will show the loading div and hide the sumbit button/div

Ga

Gatsman 06 Jul, 2014

Hi Bob,
Just saw that you posted a solution at the same time.
Thank you for spending time on this.
Please when you have time check my post, i ve already applied it on 5-6 forms but if you think that it might create any kind of issues i'd rather use your solution.

Gr

GreyHead 06 Jul, 2014

1 Likes

Hi gatsman,

This will show the loading div and hide the sumbit button/div

Yes it will BUT I think it will do that before the validation is run so may not be all that useful if the validation fails.

Bob

Ga

Gatsman 06 Jul, 2014

When you are right, you are right🙂

Gl

Glauser 22 Jun, 2015

Hello,

If I have understood well, this topic explains how to show a message while submitting a form (and I suppose that the message disappears when it goes to the next page once the form has been submitted). I've tried to do what GreyHead said in the message of 4h38 pm : I added a custom element in the designer with the option "pure code" and this code :

<div id="loading" style="display: none" >
  <div>Add message here</div>
</div>

...and I added a load javascript in "on load" on the setup with this code :

jQuery(document).ready(function(jQ){
  var validated = false;
  var form = jQ('#chronoform-Search1');
  jQ(document).on('submit', form, function(event){
    if ( validated ) {
      return;
    }
      event.stopPropagation();
      event.preventDefault();
      showLoader();
  });
  function showLoader(){
    jQ('#loading').css('display', 'block');
    jQ('#button2').prop('disabled', true);
    validated = true;
    form.submit();
  };
});

... and it doesn't work and I don't understand why. Do you have an idea ? Could you help me ?

Subsidiary question : I intended to modify the code to show a Lightbox instead of a message while the form is submitting. Is that possible ? How ?

Thank you a lot in advance for you help !

Gl

Glauser 26 Jun, 2015

OK, now it seems to be a browser problem, it doesn't work with Safari but works with Firefox.

But the question of showing a Lightbox instead of some text while submitting is still open : do somebody have an idea ?

Moreover, it is necessary for me to include in this Lightbox the result of a request to an external DB : is that possible ?

I changed the code in the custom element of the designer with :

<div id="loading" style="display: none" >
<?php
JHTML::_('behavior.modal'); 
?>
<a class="modal" href="www.yahoo.fr" rel="{handler: 'iframe', size: {x: 600, y: 600}}">Click here</a></div>

But it doesn't work...

Thank you a lot !

Gr

GreyHead 26 Jun, 2015

Hi Glauser,

Please see this FAQ for a later version of the Loader code.

I've never tried putting this in a modal window but this FAQ may help.

Bob

Gl

Glauser 26 Jun, 2015

Ok Thank you !

I didn't know the existence of these updated FAQs. I will try !

Gl

Glauser 26 Jun, 2015

Hello again,

The last version of the loader code works, but I would like that the content of :

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

...depends on an sql request based of the filled content of the form that is submitting. The problem is if I put references to the content of the filled form in the code above, it is considered as unknown, the above code can't access it... How could I do ?

One more time, thank you !

Max_admin 29 Jun, 2015

If the form element still exists then you can reference any fields by their field id in JS code:


$("#field_id").val();

Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.