Forums

Loading image

SPABO 15 Apr, 2017
Hi Max,

Still struggling with V6 as it's complete new way of set up an working...

Sometimes click too soon twice on the send button. It could give errors, or even twice the form was sent.

Therfore I added in the past, with Bob's help a "loader image" which pops up when you pushed the send button

Together with a text, One momen pls. busy with sending.

At this same moment, the send and Reset buttons disappear, until the form was send correctly

Now....how to set up this...
SPABO 19 Apr, 2017
Hi Max
Dis you have the opportunity to look at this?
Pls advise
Rgds
Kees
Max_admin 19 Apr, 2017
Hi Kees,

I'm trying to find a solution for this one before the new update, you can also use a total custom JS solution:

Use a Custom > JS element, enable the "load in dom ready" option and use this code:

$("#button_id").on("click", function(){
if($(this).closest("form").form("is valid")){
$(this).prop("disabled", true);
}
});


Best regards,
Max
Max
ChronoForms developer...
Did you try ChronoMyAdmin for managing your Joomla database tables ?
SPABO 20 Apr, 2017
Hi Max,

You mean a Custom code element and then put the JS script in?

If I do that, it does not work and the send button still visible

Kees
Max_admin 20 Apr, 2017
Hi Kees,

No, under Designer > Custom > JavaScript, place that code and check the "add in dom ready event" then drag the "JavaScript" to section one.

Best regards,
Max
Max
ChronoForms developer...
Did you try ChronoMyAdmin for managing your Joomla database tables ?
SPABO 21 Apr, 2017
Sorry Max

I don't see anything happen.

BTW: What should this script do?

$("send").on("click", function(){
if($(this).closest("form").form("is valid")){
$(this).prop("disabled", true);
}
});


Pls advise

Rgds
Kees
Max_admin 21 Apr, 2017
Hi Kees,

If your button id is "send" then please use "#send".

The script should disable the button after it has been clicked once.

Best regards,
Max
Max
ChronoForms developer...
Did you try ChronoMyAdmin for managing your Joomla database tables ?
SPABO 21 Apr, 2017
Hi Max
I'm sorry, it does not disappear ..
Rgds
Kese
Max_admin 22 Apr, 2017
Hi Kees,

Tested it and it works here, the button will not disappear, but it will be disabled and the user will not be able to click it again, here is a version to make it disappear:

$("#button2").on("click", function(){
if($(this).closest("form").form("is valid")){
$(this).hide();
}
});


Note: the code above is inside a "JavaScript" box inside the same section of the button, and the javascript has the "include in dom ready" enabled.

Best regards,
Max
Max
ChronoForms developer...
Did you try ChronoMyAdmin for managing your Joomla database tables ?
SPABO 22 Apr, 2017
Tx Max

This works for now, as discussed, I prefer to se the loading image, with some text, when the send button has been clicked

Rgds
Kees
Max_admin 22 Apr, 2017
Hi Kees,

You can try this then:

$("#button2").on("click", function(){
if($(this).closest("form").form("is valid")){
$(this).closest("form").addClass('loading');
}
});


This will add a loading spinner to the whole form and disallow any user interaction.

Best regards,
Max
Max
ChronoForms developer...
Did you try ChronoMyAdmin for managing your Joomla database tables ?
SPABO 22 Apr, 2017
Hi Max,
Looks (almost) fine, but how can I "move" this spinner to where the buttons are located?

It's now on top, just outside the screen
Max_admin 22 Apr, 2017
Answer
Hi Kees,

You can scroll the page to the spinner:

$("#button2").on("click", function(){
if($(this).closest("form").form("is valid")){
$(this).closest("form").addClass('loading');
$.G2.scrollTo($(this).closest("form"));
}
});


Best regards,
Max
Max
ChronoForms developer...
Did you try ChronoMyAdmin for managing your Joomla database tables ?
SPABO 23 Apr, 2017
1 Likes
Tx Max,
This is the solution
Rgds
Kees
This topic is locked and no more replies can be posted.