Register form: Add visual indication after button click

Plus d'informations
il y a 2 semaines 5 heures - il y a 2 semaines 5 heures #178847 par Effenberg0x0
Effenberg0x0 a créé le sujet : Register form: Add visual indication after button click
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!
Dernière édition: il y a 2 semaines 5 heures par Effenberg0x0.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 2 semaines 1 heure #178851 par tpartner
tpartner a répondu au sujet : 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.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 semaine 6 jours #178852 par Effenberg0x0
Effenberg0x0 a répondu au sujet : Register form: Add visual indication after button click

tpartner écrit: LimeSurvey version?


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

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 semaine 6 jours #178882 par tpartner
tpartner a répondu au sujet : Register form: Add visual indication after button click
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.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 semaine 6 jours #178886 par Effenberg0x0
Effenberg0x0 a répondu au sujet : Register form: Add visual indication after button click

tpartner écrit: 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!

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 semaine 6 jours #178888 par tpartner
tpartner a répondu au sujet : 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.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 semaine 6 jours #178889 par Effenberg0x0
Effenberg0x0 a répondu au sujet : Register form: Add visual indication after button click

tpartner écrit: 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.
Pièces jointes :
Les utilisateur(s) suivant ont remercié: holch, tpartner

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 semaine 3 jours #178911 par DenisChenu
DenisChenu a répondu au sujet : Register form: Add visual indication after button click
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 .

Connexion ou Créer un compte pour participer à la conversation.

Commencez dès maintenant !

Créez simplement un compte et commencez à utiliser LimeSurvey dès aujourd'hui.

Inscrivez-vous maintenant

Inscrivez-vous à notre Newsletter!