Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Register form: Add visual indication after button click

Effenberg0x0
Topic Author
Offline
New Member

More

7 years 8 months ago - 7 years 8 months ago #178847 by Effenberg0x0

Register form: Add visual indication after button click was created by Effenberg0x0

Hi,

I have noticed that some users get confused on the public registration form. There's no visual indication that something is happening after they fill the form and press the register button. So sometimes they press the button again or just succumb to their anxiety and don't participate in the surveys at all.

I think it would be a good idea to have some visual indication while the registration is going on. I thought of:
displaying a semi-opaque div over the form, possibly with a "spinner" image centered, while waiting for the server response.

My question is: I'm having trouble trying the find the JavaScript responsible for handling the button press event, and I can't find any documentation on this specific info.

Can anyone point me in the right direction?

Thanks!

Last edit: 7 years 8 months ago by Effenberg0x0.

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

7 years 8 months ago #178851 by tpartner

Replied by tpartner on topic Register form: Add visual indication after button click

LimeSurvey version?

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

The topic has been locked.

Effenberg0x0
Topic Author
Offline
New Member

More

7 years 8 months ago #178852 by Effenberg0x0

Replied by Effenberg0x0 on topic Register form: Add visual indication after button click

tpartner wrote: LimeSurvey version?

Of course, I forgot the most important info, sorry about that.
I'm using LimeSurvey 3.15.5 (Latest stable release).

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

7 years 8 months ago #178882 by tpartner

Replied by tpartner on topic Register form: Add visual indication after button click

Something like this should get you to the button press:

Code:

$(document).on('ready pjax:scriptcomplete',function() {

	if($('#register_button').length > 0) {
		$('#limesurvey').submit(function(e) {
			// Do something when the register form is submitted.
		});	
	}
});

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

The topic has been locked.

Effenberg0x0
Topic Author
Offline
New Member

More

7 years 8 months ago #178886 by Effenberg0x0

Replied by Effenberg0x0 on topic Register form: Add visual indication after button click

tpartner wrote: Something like this should get you to the button press:

Code:

$(document).on('ready pjax:scriptcomplete',function() { if($('#register_button').length > 0) { $('#limesurvey').submit(function(e) { // Do something when the register form is submitted. }); } });

Brillant, that did it. Using this selector I could then easily customize #register_button with a "Please wait <spinner img>" without blocking the registration process itself (which was happening intermittently when I was capturing the button click only).

Thank you!

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

7 years 8 months ago #178888 by tpartner

Replied by tpartner on topic Register form: Add visual indication after button click

Nice!

Can you please provide a code sample and screenshot?

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

The topic has been locked.

Effenberg0x0
Topic Author
Offline
New Member

More

7 years 8 months ago #178889 by Effenberg0x0

Replied by Effenberg0x0 on topic Register form: Add visual indication after button click

tpartner wrote: Nice!

Can you please provide a code sample and screenshot?

Sure, there you go:

Configuration / Advanced / Themes / <User Theme> / Theme editor / JavaScript Files: / custom.js

Code:

$(document).on('ready pjax:scriptcomplete', function() {
    if($('#register_button').length > 0) {
        $('#limesurvey').submit(function(e) {
            // We can change the text to whatever: "Registering...", "Please wait...", "Stop clicking...", etc.
            // $('#register_button').prop("value", "Register "); 
            
            // I'm simply inserting a div that contains the spinner animated gif image inside the <button></button>.
            // It could also be done by adding the spinner <img></img> here and using JQuery to manipulate visibility. 
            $('#register_button').append("<div class='register_button_spinner'></div>");
        });
    }
});

Configuration / Advanced / Themes / <User Theme> / Theme editor / CSS Files: / custom.css

Code:

.register_button_spinner {
    background-image: url(/static/img/register_button_spinner.gif); 
}

Registration button with an animated spinner:

Thanks again for your help.

...ion-screen.gif

The following user(s) said Thank You: holch, tpartner

The topic has been locked.

DenisChenu
Away
LimeSurvey Community Team & Official Partner

More

7 years 8 months ago #178911 by DenisChenu

Replied by DenisChenu on topic Register form: Add visual indication after button click

I add a global spinner in gitlab.com/SondagesPro/SurveyThemes/skel...kelvanilla.js#L83-96

JS:

Code:

$(document).ready(function(){
            $("body").removeClass("body-loading").addClass("body-loaded");
        });
        $("button[type='submit']").on("click",function(){
            if (!$(this).closest('form')[0].checkValidity || $(this).closest('form')[0].checkValidity()) {
                $("body").removeClass("body-loaded").addClass("body-loading");
            }
        });
        $("a[data-limesurvey-submit],a[data-limesurvey-lang]").on("click",function(){
            $("body").removeClass("body-loaded").addClass("body-loading");
        });

CSS

Code:

/* loading loaded */
.js .body-loading #dynamicReloadContainer {
    opacity: 0;
}
.js .body-loading #dynamicReloadContainer {
    -webkit-transition: opacity 400ms linear;
    transition: opacity 400ms linear;
}
#ajax-loading .loader {
    display: none;
    z-index: 9999999;
    position: fixed;
    top: 50%;
    left: 50%;
    border: 0;
}
#ajax-loading .fa{width:1rem;height:1rem;font-size:1rem;margin-top:-0.5rem;margin-left:-0.5rem;}
#ajax-loading .fa-lg{width:1.4rem;height:1.4rem;font-size:1.4rem;margin-top:-0.7rem;margin-left:-0.7rem;}
#ajax-loading .fa-2x{width:2rem;height:2rem;font-size:2rem;margin-top:-1rem;margin-left:-1rem;}
#ajax-loading .fa-3x{width:3rem;height:3rem;font-size:3rem;margin-top:-1.5rem;margin-left:-1.5rem;}
#ajax-loading .fa-2x{width:4rem;height:4rem;font-size:4rem;margin-top:-2rem;margin-left:-2rem;}
#ajax-loading .fa-2x{width:5rem;height:5rem;font-size:5rem;margin-top:-2.5rem;margin-left:-2.5rem;}

.js .body-loading #ajax-loading .loader {
    display: block;
}

HTML/twig :

Code:

<div id="ajax-loading" aria-hidden=1><i class="loader fa fa-circle-o-notch fa-spin fa-3x fa-fw text-muted"></i></div>
<script>
if (!window.jQuery) {
    window.onload = function() {
        body = document.getElementsByTagName('body')[0];
        body.className = body.className.replace(/\body-loading\b/,'body-loaded');
    };
}
</script>

I use navogator/ajax_indicator.twig because it was (empty) in vanilla, even if it's not ajax.

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member. - Professional support - Plugins, theme and development .
I don't answer to private message.

The topic has been locked.