JS for activating a text field on list(radio) and multiple choice answers

Plus d'informations
il y a 4 mois 3 jours - il y a 4 mois 3 jours #185598 par krosser
Hi guys!

I have two related questions that I join together with CSS:
1. list(radio) in one case, and multiple choice in another
2. long free text in both cases

Based on some examples, I wrote JS scripts for both cases to trigger the text input to become active when one answer choice is clicked. Then, the text input becomes inactive when either another answer is clicked or the relevant answer is deselected (in multiple choice). In addition, any written text is removed when the field is deactivated.




The code for list(radio):
<script type="text/javascript" charset="utf-8">		
	$(document).ready(function() {
 
			// Identify this question
			var thisQuestion = $('#question{QID}');
 
			// Initially disable the Text field
			$('#answer294751X1038X38277').prop('disabled', 'true').addClass('ui-state-disabled');
 
			// Listeners on Yes/No radios to toggle the Text field
			$('input:radio[value="A1"]', thisQuestion).click(function(){
				$('#answer294751X1038X38277').prop('disabled', '').removeClass('ui-state-disabled');
			});
			$('input:radio[value="A2"]', thisQuestion).click(function(){
				$('#answer294751X1038X38277').prop('disabled', 'true').addClass('ui-state-disabled').val('');
			});
 
    });
</script>

The code for multiple choice:
<script type="text/javascript" charset="utf-8">		
 
	$(document).ready(function() {
 
			// Initially disable the Text field      
              $('#answer294751X1039X38279').prop('disabled', true);
 
      		// Listener on the answer choice to toggle the Text field
              $('#answer294751X1039X38278SQ003').on('click', function(){
        if( $(this).is(':checked') ){
            $('#answer294751X1039X38279').attr('disabled', false);
    }else{
          $('#answer294751X1039X38279').attr('disabled', true).val('');
    }
});
 
});
</script>


The sample survey is attached.

Fichier attaché :

Nom du fichier : limesurvey...13-2.lss
Taille du ficher :24 ko


The issue is when I go to next page and back (using either Next button or Question Index) the text field becomes inactive again and when I switch between pages two more times, then the text is removed by itself.
My aim is to keep the text input active with the text written there and then not to lose it when pages are switched multiple times.
Unfortunately, my JS skills are not enough for that...
Any help would be much appreciated.

I'm using the latest LS 3.17 hosted on LS servers, not installed locally.
Pièces jointes :
Dernière édition: il y a 4 mois 3 jours par krosser. Raison: adjusted the 2nd script

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

LimeSurvey Partners
Plus d'informations
il y a 4 mois 3 jours #185605 par DenisChenu
Since i create some system in SkelVanilla for such situation , no jS needed, just css (Css Class in advanced settings):

See extensions.sondages.pro/themes-and-templ...b-group-inside-group

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 .
An error happen ? Before make a new topic : remind the Debug mode .

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

Plus d'informations
il y a 4 mois 3 jours - il y a 4 mois 3 jours #185606 par tpartner
The problem is that you are disabling the textareas. If they are disabled their value is not recorded when the form submits, so is gone when you return to the page.

Try something like this:

$('#answer294751X1039X38279').prop('readonly', true).addClass('read-only');
$('#answer294751X1039X38279').prop('readonly', false).removeClass('read-only');

And something like this in custom.css:

textarea.read-only {
	opacity:0.45;
	filter:alpha(opacity=45);
}

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
Dernière édition: il y a 4 mois 3 jours par tpartner.
Les utilisateur(s) suivant ont remercié: krosser

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

Plus d'informations
il y a 4 mois 3 jours #185619 par gabrieljenik
By quickly reading at your code I see the following issues:
1) You are only reacting to document ready event and not the pjax:scriptcomplete (LS v3.xx)
2) You are assuming the radio or checkboxes are not set, which is not the case when you return to the page. So in case they are set, init the text inputs properly instead of clearing them.

Cheers,

Cheers,
Gabriel - www.Encuesta.Biz - Authorized Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Assistance on LimeSurvey forum and LimeSurvey core developpement are on my free time (Say thanks ?)....[img]
Les utilisateur(s) suivant ont remercié: krosser

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

Plus d'informations
il y a 4 mois 3 jours #185642 par krosser

DenisChenu écrit: Since i create some system in SkelVanilla for such situation , no jS needed, just css (Css Class in advanced settings):

See extensions.sondages.pro/themes-and-templ...b-group-inside-group


I am not sure how this is done, but from what I have read online, it is not possible to disable the text field with CSS. It is possible to place an overlay on top of it though.

I'm using the latest LS 3.17 hosted on LS servers, not installed locally.

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

Plus d'informations
il y a 4 mois 3 jours #185643 par krosser

tpartner écrit: The problem is that you are disabling the textareas. If they are disabled their value is not recorded when the form submits, so is gone when you return to the page.

Try something like this:

$('#answer294751X1039X38279').prop('readonly', true).addClass('read-only');
$('#answer294751X1039X38279').prop('readonly', false).removeClass('read-only');

And something like this in custom.css:

textarea.read-only {
	opacity:0.45;
	filter:alpha(opacity=45);
}



Thanks for the hint and example, Tony! Good to know that the value would be lost.
I guess then it is the same for both scripts.

I have tried to rewrite the second one using your example, but when I return to the page, the text area is inactive again and I need to reselect the answer choice to make the area active again. Is it possible to keep the area active when you return to the page?
<script type="text/javascript" charset="utf-8">   
 
  $(document).on('ready pjax:scriptcomplete',function() {
 
      // Add class to the text field     
              $('#answer294751X1039X38279').prop('readonly', true).addClass('read-only');
 
          // Listener on the answer choice to remove/add the class 
              $('#answer294751X1039X38278SQ003').on('click', function(){
        if( $(this).is(':checked') ){
            $('#answer294751X1039X38279').prop('readonly', false).removeClass('read-only'); 
    }else{
          $('#answer294751X1039X38279').prop('readonly', true).addClass('read-only');
    }
});
 
});
</script>

I'm using the latest LS 3.17 hosted on LS servers, not installed locally.

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

Plus d'informations
il y a 4 mois 3 jours #185644 par krosser

gabrieljenik écrit: By quickly reading at your code I see the following issues:
1) You are only reacting to document ready event and not the pjax:scriptcomplete (LS v3.xx)
2) You are assuming the radio or checkboxes are not set, which is not the case when you return to the page. So in case they are set, init the text inputs properly instead of clearing them.

Cheers,


Many thanks for your hints!
1) Are you saying that I should change to the following beginning of the script?
$(document).on('ready pjax:scriptcomplete',function()

2) Unfortunately, I don't know how to set the text inputs properly. Could you please point me to an example?

I'm using the latest LS 3.17 hosted on LS servers, not installed locally.

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

Plus d'informations
il y a 4 mois 2 jours #185651 par tpartner
It seems to me that to set the initial state you want something like this (untested):

<script type="text/javascript" charset="utf-8">   
 
	$(document).on('ready pjax:scriptcomplete',function() {
 
		// Initial state
		if($('#answer294751X1039X38278SQ003').is(':checked')) {
			$('#answer294751X1039X38279').prop('readonly', true).addClass('read-only');
		}	
 
		// Listener on the answer choice to remove/add the class 
		$('#answer294751X1039X38278SQ003').on('click', function(){
			if( $(this).is(':checked') ) {
				$('#answer294751X1039X38279').prop('readonly', false).removeClass('read-only'); 
			}
			else {
				$('#answer294751X1039X38279').prop('readonly', true).addClass('read-only');
			}
		});
 
	});
</script>

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com

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

Plus d'informations
il y a 4 mois 2 jours #185655 par krosser
I think not, because the initial state is inactive, and when the SQ003 is checked, the text area becomes active. Then, when the text is written there, it should stay active even when I go to next page and back. It should become inactive again only when the SQ003 is unchecked again.
I have tried the new script and something is wrong - the area is active when you first get to the page. Then it becomes inactive when the SQ003 is checked and unchecked.

I'm using the latest LS 3.17 hosted on LS servers, not installed locally.

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

Plus d'informations
il y a 4 mois 2 jours - il y a 4 mois 2 jours #185657 par tpartner
Sorry, I don't follow your logic. JavaScript has no way of determining whether an input was checked/unchecked on a previous page visit. It can only act on what occurs in the current page load.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
Dernière édition: il y a 4 mois 2 jours par tpartner.

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

Plus d'informations
il y a 4 mois 2 jours #185660 par krosser
Is it possible to link the text area to the answer choice so that when it is checked, then the area is kept active (with text inside), when you return to the page?
So, the initial state is inactive (on the first page load), but then the state is dependent on whether the answer is checked or not, even on the second page load and so on... Are you saying that it is not possible?

I'm using the latest LS 3.17 hosted on LS servers, not installed locally.

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

Plus d'informations
il y a 4 mois 2 jours #185661 par tpartner
As I said,JavaScript has no way of knowing whether the page was previously loaded or what happened if it was. If you want to access events in previous page-loads, you will need to insert a hidden question to record those.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com

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

Plus d'informations
il y a 4 mois 2 jours #185686 par DenisChenu
I'm not OK to have another input.

Just control current state before set it as disbaled
if(!$('#answer294751X1039X38278SQ003').is(':checked')) {
    $('#answer294751X1039X38279').val("").prop('disabled', 'true');
}

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