Welcome to the LimeSurvey Community Forum

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

Conditionaly hide column

ls_chtoune
Topic Author
Offline
New Member

More

5 years 4 months ago #215206 by ls_chtoune

Conditionaly hide column was created by ls_chtoune

Hey, I would like to hide a column conditionally on the answer in an other column. More specifically, I have an array text question. With three X-scale sub-questions.
- In the first column, I have a question with birth year
- In the second column a dropdown list with a short list of countries (people select in which country they are born) ;
- In the third column, an autocomplete question with the Google Places API, restricted to localities in France (people select in which city they are born). I would like this third question to be shown only for people born in France (for the other countries, I do not need the information about the city).

I saw several topics, like this one forums.limesurvey.org/forum/design-issue...umn-in-array?start=0 and this bug report: bugs.limesurvey.org/view.php?id=12157 . I also checked the hide column plugin but I think it is not adapted to my problem because the condition depends on an element of the array.

Is there a solution to hide a column in an array with text and dropdown/autocomplete questions ?

Best.

The topic has been locked.

Joffm
Offline
LimeSurvey Community Team

More

5 years 4 months ago - 5 years 4 months ago #215207 by Joffm

Replied by Joffm on topic Conditionaly hide column

Hi,
Could you please send this question as lss export.

If you can't hide there is a way to disable this column

Best regards
Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless

Last edit: 5 years 4 months ago by Joffm.

The following user(s) said Thank You: ls_chtoune

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

5 years 4 months ago #215217 by tpartner

Replied by tpartner on topic Conditionaly hide column

It can be done with a listener on the column-2 drop-downs. As Joffm says, attach a .lss export containing only the relevant question.

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

The following user(s) said Thank You: ls_chtoune

The topic has been locked.

ls_chtoune
Topic Author
Offline
New Member

More

5 years 4 months ago #215227 by ls_chtoune

Replied by ls_chtoune on topic Conditionaly hide column

Thank to both of you for your answers. Please find attached a .lss file with an example question.

...vey_758459.lss

The topic has been locked.

Joffm
Offline
LimeSurvey Community Team

More

5 years 4 months ago #215235 by Joffm

Replied by Joffm on topic Conditionaly hide column

Hi,
I adapted Tony's script (drop-down -> drop-down)

Code:

<script type="text/javascript" charset="utf-8">
    
    
    $(document).on('ready pjax:scriptcomplete',function(){
        var thisQuestion = $('#question{QID}');
 
        // Insert selects into column 2
            $(' .answer_cell_S2b1', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
                <option value="1">France</option>\
                <option value="2">Allemagne</option>\
                <option value="3">Suisse</option>\
                <option value="4">Autre</option>\
            </select>');
 
 
        // Listeners on select elements
        $('.inserted-select', thisQuestion).on('change', function(i) {
            if($(this).val() != '') {
                $(this).closest('.answer-item').find('input:text').val($.trim($('option:selected', this).text())).trigger('change');
            }
            else {
                $(this).closest('.answer-item').find('input:text').val('').trigger('change');
            }
            
            // 3rd column conditional on 2nd column
            if($(this).closest('.answer-item').hasClass('answer_cell_S2b1')) {
                 handleColumn3($(this));
            }
        });
        
        function handleColumn3(thisSelect) {
            var thisRow = $(thisSelect).closest('tr.subquestion-list');
            var item3 = $('.answer_cell_S2b2', thisRow);
            if($(thisSelect).val() == '1') {
                $('input:text', item3).prop('disabled', false);
            }
            else {
                $('input:text', item3).val('').prop('disabled', true);
//                $('input:text', item3).val('').trigger('change');
            }            
        }
 
        // Returning to page
        $('.with-select input:text', thisQuestion).each(function(i) {
            var thisCell = $(this).closest('.answer-item');
            var inputText = $.trim($(this).val());
            var selectval = $('select.inserted-select option', thisCell).filter(function () { return $(this).html() == inputText; }).val();
            $('select.inserted-select', thisCell).val(selectval);
            
            // 3rd column conditional on 2nd column
            if($(this).closest('.answer-item').hasClass('answer_cell_S2b1')) {
                 handleColumn3($('select.inserted-select', thisCell));
            }
        });
 
        
        // Clean-up styles
        $('select.inserted-select', thisQuestion).css({
            'max-width': '100%'
        });
        $('.with-select input:text', thisQuestion).css({
            'position': 'absolute',
            'left': '-9999em'
        });
    });
</script>