Register form: Add visual indication after button click

Mehr
2 Wochen 1 Tag her - 2 Wochen 1 Tag her #178847 von Effenberg0x0
Effenberg0x0 erstellte das Thema 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!
Letzte Änderung: 2 Wochen 1 Tag her von Effenberg0x0.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
2 Wochen 1 Tag her #178851 von tpartner
tpartner antwortete auf das Thema: 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.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
2 Wochen 1 Tag her #178852 von Effenberg0x0
Effenberg0x0 antwortete auf das Thema: Register form: Add visual indication after button click

tpartner schrieb: LimeSurvey version?


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

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
2 Wochen 12 Stunden her #178882 von tpartner
tpartner antwortete auf das Thema: 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.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
2 Wochen 7 Stunden her #178886 von Effenberg0x0
Effenberg0x0 antwortete auf das Thema: Register form: Add visual indication after button click

tpartner schrieb: 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!

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
2 Wochen 6 Stunden her #178888 von tpartner
tpartner antwortete auf das Thema: 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.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
2 Wochen 5 Stunden her #178889 von Effenberg0x0
Effenberg0x0 antwortete auf das Thema: Register form: Add visual indication after button click

tpartner schrieb: 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.
Anhang:
Folgende Benutzer bedankten sich: holch, tpartner

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
1 Woche 4 Tage her #178911 von DenisChenu
DenisChenu antwortete auf das Thema: 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 .

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Jetzt loslegen!

Melden Sie sich jetzt an, und erstellen Sie in wenigen Minuten Ihre erste Umfrage.

Account einrichten

Abonnieren Sie unseren Newsletter

Abonnieren Sie unseren Newsletter für alle Neuigkeiten rund um LimeSurvey
captcha