Welcome to the LimeSurvey Community Forum

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

Array (Text): more than textboxes

  • elevia
  • elevia's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
7 years 8 months ago #139937 by elevia
Array (Text): more than textboxes was created by elevia
Hi all,
I have a simple question of type Array (Text) and I wish to display for certain columns different controls than textboxes (e.g. a checkbox for column 2 and a dropdown list for column 5).

I found some Javascript code to do similar tasks, but it didn't work as expected (I'm using version 2.50).

What do you suggest to accomplish this task?

Thanks

Marco
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 8 months ago #139947 by tpartner
Replied by tpartner on topic Array (Text): more than textboxes

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: elevia
The topic has been locked.
  • elevia
  • elevia's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
7 years 8 months ago #139983 by elevia
Replied by elevia on topic Array (Text): more than textboxes
Thanks Denis,
unfortunately, I'm using LimeService hosting service and this plugin is not installed on their servers.

I think that I have to implement a client-side Javascript solution.

Marco
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 8 months ago #139987 by tpartner
Replied by tpartner on topic Array (Text): more than textboxes
Okay, here's a JavaScript solution. In this example, drop-downs are inserted into column 3 and check-boxes into column 4. Note that these are true check-boxes, not the pseudo-elements inserted into some 2.5 templates.

Code:
<script type="text/javascript" charset="utf-8">     
 
  $(document).ready(function(){  
 
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    // Assign column-specific classes
    $('table.subquestion-list tr', thisQuestion).each(function(i) {
 
      $('> *:gt(0)', this).each(function(i){
        $(this).addClass('column-'+(i+1));
        $(this).attr('data-column', i+1);
      });
    });
 
    // Hide the text inputs in columns 3 and 4
    $('.column-3 input[type="text"], .column-4 input[type="text"]', thisQuestion).hide();
 
    // Define the select element (dropdown)
    var select1 = '<select class="inserted-select"> \
              <option value="">-- Please Choose --</option> \
              <option value="Program 1">Program 1</option> \
              <option value="Program 2">Program 2</option> \
              <option value="Program 3">Program 3</option> \
              <option value="Program 4">Program 4</option> \
            </select>';
 
    // Insert the select elements into column 3
    $('.answer-item.column-3').append(select1);
 
    // Initial dropdown values in column 3 (if the question has already been answered)
    $('.answer-item.column-3 input[type="text"]').each(function(i){
      if($.trim($(this).val()) != '') {
        $(this).closest('td').find('.inserted-select').val($.trim($(this).val()));
      }
    });
 
    // Listener on the dropdowns (insert selected values into hidden text input)
    $('.inserted-select').change(function() {
      $(this).closest('td').find('input[type="text"]').val($(this).val());
    });
 
    // Insert the checkboxes into column 4
    $('.answer-item.column-4').append('<input class="checkbox inserted-checkbox" type="checkbox" />');
 
    // Initial checkbox states (if the question has already been answered)
    $('.answer-item.column-4 input[type="text"]').each(function(i){
      if($.trim($(this).val()) == 'Y') {
        $(this).closest('td').find('.inserted-checkbox').attr('checked', true);
      }
    });
 
    // Listener on the checkboxes (insert "Y" into hidden text input when checked)
    $('.inserted-checkbox').change(function() {
      if($(this).is(':checked')) {
        $(this).closest('td').find('input[type="text"]').val('Y');
      }
      else {
        $(this).closest('td').find('input[type="text"]').val('');
      }
    });
  });
</script>

Sample survey attached:

File Attachment:

File Name: limesurvey...-3-4.lss
File Size:21 KB

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: elevia
The topic has been locked.
  • elevia
  • elevia's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
7 years 7 months ago #141129 by elevia
Replied by elevia on topic Array (Text): more than textboxes
Thanks! It works very well.

Marco
The topic has been locked.
More
5 years 10 months ago #169168 by krosser
Replied by krosser on topic Array (Text): more than textboxes

tpartner wrote: Okay, here's a JavaScript solution. In this example, drop-downs are inserted into column 3 and check-boxes into column 4. Note that these are true check-boxes, not the pseudo-elements inserted into some 2.5 templates.

Code:
<script type="text/javascript" charset="utf-8">     
 
  $(document).ready(function(){  
 
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    // Assign column-specific classes
    $('table.subquestion-list tr', thisQuestion).each(function(i) {
 
      $('> *:gt(0)', this).each(function(i){
        $(this).addClass('column-'+(i+1));
        $(this).attr('data-column', i+1);
      });
    });
 
    // Hide the text inputs in columns 3 and 4
    $('.column-3 input[type="text"], .column-4 input[type="text"]', thisQuestion).hide();
 
    // Define the select element (dropdown)
    var select1 = '<select class="inserted-select"> \
              <option value="">-- Please Choose --</option> \
              <option value="Program 1">Program 1</option> \
              <option value="Program 2">Program 2</option> \
              <option value="Program 3">Program 3</option> \
              <option value="Program 4">Program 4</option> \
            </select>';
 
    // Insert the select elements into column 3
    $('.answer-item.column-3').append(select1);
 
    // Initial dropdown values in column 3 (if the question has already been answered)
    $('.answer-item.column-3 input[type="text"]').each(function(i){
      if($.trim($(this).val()) != '') {
        $(this).closest('td').find('.inserted-select').val($.trim($(this).val()));
      }
    });
 
    // Listener on the dropdowns (insert selected values into hidden text input)
    $('.inserted-select').change(function() {
      $(this).closest('td').find('input[type="text"]').val($(this).val());
    });
 
    // Insert the checkboxes into column 4
    $('.answer-item.column-4').append('<input class="checkbox inserted-checkbox" type="checkbox" />');
 
    // Initial checkbox states (if the question has already been answered)
    $('.answer-item.column-4 input[type="text"]').each(function(i){
      if($.trim($(this).val()) == 'Y') {
        $(this).closest('td').find('.inserted-checkbox').attr('checked', true);
      }
    });
 
    // Listener on the checkboxes (insert "Y" into hidden text input when checked)
    $('.inserted-checkbox').change(function() {
      if($(this).is(':checked')) {
        $(this).closest('td').find('input[type="text"]').val('Y');
      }
      else {
        $(this).closest('td').find('input[type="text"]').val('');
      }
    });
  });
</script>

Sample survey attached:

File Attachment:

File Name: limesurvey...-3-4.lss
File Size:21 KB


Hey guys, I am trying to adapt Tony's code for the latest LS version 3.8, because it doesn't place the check-boxes centered.



I have been trying to add a CSS code to this part, but can't figure out which value is correct.
Code:
// Insert the checkboxes into column 4
    $('.answer-item.column-4').append('<input class="checkbox inserted-checkbox" type="checkbox" />').css({
          'position': 'absolute',
          'left': '-9999em'
        });
Any ideas how to fix this?

I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose