Register form: Add visual indication after button click

More
2 months 2 weeks ago - 2 months 2 weeks ago #178847 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: 2 months 2 weeks ago by Effenberg0x0.

Please Log in or Create an account to join the conversation.

LimeSurvey Partners
More
2 months 2 weeks ago #178851 by tpartner
LimeSurvey version?

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

Please Log in or Create an account to join the conversation.

More
2 months 2 weeks ago #178852 by Effenberg0x0

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

Please Log in or Create an account to join the conversation.

More
2 months 2 weeks ago #178882 by tpartner
Something like this should get you to the button press:

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

Please Log in or Create an account to join the conversation.

More
2 months 2 weeks ago #178886 by Effenberg0x0

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

$(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!

Please Log in or Create an account to join the conversation.

More
2 months 2 weeks ago #178888 by tpartner
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.

Please Log in or Create an account to join the conversation.

More
2 months 2 weeks ago #178889 by Effenberg0x0

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
$(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
.register_button_spinner {
    background-image: url(/static/img/register_button_spinner.gif); 
}

Registration button with an animated spinner:


Thanks again for your help.
Attachments:
The following user(s) said Thank You: holch, tpartner

Please Log in or Create an account to join the conversation.

More
2 months 1 week ago #178911 by DenisChenu
I add a global spinner in gitlab.com/SondagesPro/SurveyThemes/skel...kelvanilla.js#L83-96

JS:
$(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
/* 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 :
<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 service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!