- Posts: 16
- Thank you received: 2
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
Less
More
5 years 3 months ago - 5 years 3 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!
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: 5 years 3 months ago by Effenberg0x0.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
5 years 3 months ago #178851
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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
Less
More
- Posts: 16
- Thank you received: 2
5 years 3 months ago #178852
by Effenberg0x0
Of course, I forgot the most important info, sorry about that.
I'm using LimeSurvey 3.15.5 (Latest stable release).
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
Less
More
- Posts: 10109
- Thank you received: 3595
5 years 3 months ago #178882
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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
Less
More
- Posts: 16
- Thank you received: 2
5 years 3 months ago #178886
by Effenberg0x0
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!
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
Less
More
- Posts: 10109
- Thank you received: 3595
5 years 3 months ago #178888
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Register form: Add visual indication after button click
Nice!
Can you please provide a code sample and screenshot?
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
Less
More
- Posts: 16
- Thank you received: 2
5 years 3 months ago #178889
by Effenberg0x0
Sure, there you go:
Configuration / Advanced / Themes / <User Theme> / Theme editor / JavaScript Files: / custom.js
Configuration / Advanced / Themes / <User Theme> / Theme editor / CSS Files: / custom.css
Registration button with an animated spinner:
Thanks again for your help.
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.
Attachments:
The following user(s) said Thank You: holch, tpartner
The topic has been locked.
- DenisChenu
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 13648
- Thank you received: 2491
5 years 3 months ago #178911
by DenisChenu
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
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:
CSS
HTML/twig :
I use navogator/ajax_indicator.twig because it was (empty) in vanilla, even if it's not ajax.
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 service on demand , plugin development .
I don't answer to private message.
The topic has been locked.