Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

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

  • krosser
  • krosser's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
4 years 9 months ago - 4 years 9 months ago #185598 by 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):
Code:
<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:
Code:
<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.

File Attachment:

File Name: limesurvey...13-2.lss
File Size:24 KB


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.22 hosted on LS servers, not installed locally.
Last edit: 4 years 9 months ago by krosser. Reason: adjusted the 2nd script
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 9 months ago #185605 by 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 .
I don't answer to private message.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 9 months ago - 4 years 9 months ago #185606 by 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:

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

And something like this in custom.css:

Code:
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.
Last edit: 4 years 9 months ago by tpartner.
The following user(s) said Thank You: krosser
The topic has been locked.
  • gabrieljenik
  • gabrieljenik's Avatar
  • Offline
  • Official LimeSurvey Partner
  • Official LimeSurvey Partner
More
4 years 9 months ago #185619 by 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,

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

Checkout our Reporting Solutions and our plugin shop at www.encuesta.biz .

The following user(s) said Thank You: krosser
The topic has been locked.
  • krosser
  • krosser's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
4 years 9 months ago #185642 by krosser

DenisChenu wrote: 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.22 hosted on LS servers, not installed locally.
The topic has been locked.
  • krosser
  • krosser's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
4 years 9 months ago #185643 by krosser

tpartner wrote: 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:

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

And something like this in custom.css:

Code:
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?
Code:
<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.22 hosted on LS servers, not installed locally.
The topic has been locked.
  • krosser
  • krosser's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
4 years 9 months ago #185644 by krosser

gabrieljenik wrote: 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?
Code:
$(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.22 hosted on LS servers, not installed locally.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 9 months ago #185651 by tpartner
It seems to me that to set the initial state you want something like this (untested):

Code:
<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.
The topic has been locked.
  • krosser
  • krosser's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
4 years 9 months ago #185655 by 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.22 hosted on LS servers, not installed locally.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 9 months ago - 4 years 9 months ago #185657 by 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.
Last edit: 4 years 9 months ago by tpartner.
The topic has been locked.
  • krosser
  • krosser's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
4 years 9 months ago #185660 by 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.22 hosted on LS servers, not installed locally.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 9 months ago #185661 by 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.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose