Loading image

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...

Hi Max
Dis you have the opportunity to look at this?
Pls advise
Rgds
Kees

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

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

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

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

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

Hi Max
I'm sorry, it does not disappear ..
Rgds
Kese

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

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

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

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

Tx Max,
This is the solution
Rgds
Kees