- Posts: 222
- Thank you received: 10
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
- Topic Author
- Offline
- Elite Member
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.
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.
- DenisChenu
- Offline
- LimeSurvey Community Team
- Posts: 13935
- Thank you received: 2551
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.
- tpartner
- Offline
- LimeSurvey Community Team
- Posts: 10634
- Thank you received: 3698
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.
- gabrieljenik
- Offline
- Official LimeSurvey Partner
- Posts: 272
- Thank you received: 45
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 .
- krosser
- Topic Author
- Offline
- Elite Member
- Posts: 222
- Thank you received: 10
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.
- krosser
- Topic Author
- Offline
- Elite Member
- Posts: 222
- Thank you received: 10
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?
<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.
- krosser
- Topic Author
- Offline
- Elite Member
- Posts: 222
- Thank you received: 10
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?
$(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.
- tpartner
- Offline
- LimeSurvey Community Team
- Posts: 10634
- Thank you received: 3698
<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.
- krosser
- Topic Author
- Offline
- Elite Member
- Posts: 222
- Thank you received: 10
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.
- tpartner
- Offline
- LimeSurvey Community Team
- Posts: 10634
- Thank you received: 3698
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
- krosser
- Topic Author
- Offline
- Elite Member
- Posts: 222
- Thank you received: 10
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.
- tpartner
- Offline
- LimeSurvey Community Team
- Posts: 10634
- Thank you received: 3698
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.