Welcome to the LimeSurvey Community Forum

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

Array question with answers in dropdown list

More
7 years 3 days ago - 7 years 3 days ago #173531 by anaidgh
Hi, Tony, thanks for the fast answer, sorry i want to replay in the first post, the one with the next code:

<script type="text/javascript" charset="utf-8">

$(document).on('ready pjax:scriptcomplete',function(){

$('#question{QID} .answer_cell_SQ001 option[value=1]').text('No recurro');
$('#question{QID} .answer_cell_SQ001 option[value=2]').text('Arocena Gustavo');
$('#question{QID} .answer_cell_SQ001 option[value=3]').text('Aspra Manuel');
$('#question{QID} .answer_cell_SQ001 option[value=4]').text('Bravo Ricardo');
$('#question{QID} .answer_cell_SQ001 option[value=5]').text('Zalazar Martin');

$('#question{QID} .answer_cell_SQ002 option[value=1]').text('No recurro');
$('#question{QID} .answer_cell_SQ002 option[value=2]').text('Bravo Ricardo');
$('#question{QID} .answer_cell_SQ002 option[value=3]').text('Fernandez Flavio');
$('#question{QID} .answer_cell_SQ002 option[value=4]').text('Zalazar Martin');
$('#question{QID} .answer_cell_SQ002 option[value=5]').text('').hide();

});

</script>


I want to create this array, (with three types of inputs)
Last edit: 7 years 3 days ago by anaidgh.
The topic has been locked.
More
7 years 2 days ago - 7 years 2 days ago #173576 by tpartner
Here is script that will manipulate an array-texts question as follows. You can adapt this to your needs.
  1. Leave row 1 as text inputs
  2. Place an identical drop-down in all cells of row 2
  3. Place a different identical drop-down in all cells of row 3
  4. Enforce numeric inputs in row 4


Code:
<script type="text/javascript" charset="utf-8">
 
  $(document).on('ready pjax:scriptcomplete',function(){
    var thisQuestion = $('#question{QID}');
 
    // Insert selects into row 2
    if($('tr.subquestion-list:eq(1) .answer-item .inserted-select', thisQuestion).length == 0) {
      $('tr.subquestion-list:eq(1) .answer-item', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
        <option value="">Please choose...</option>\
        <option value="1">Yes</option>\
        <option value="2">No</option>\
        <option value="3">Do not know</option>\
      </select>');
    } 
 
    // Insert selects into row 3
    if($('tr.subquestion-list:eq(2) .answer-item .inserted-select', thisQuestion).length == 0) {
      $('tr.subquestion-list:eq(2) .answer-item', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
        <option value="">Please choose...</option>\
        <option value="1">Red</option>\
        <option value="2">Blue</option>\
        <option value="3">Pink</option>\
        <option value="3">Purple</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');
      }
    });
 
    // 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);
    });
 
    // Numerics only in row 4
    $('tr.subquestion-list:eq(3) input:text', thisQuestion).on('keyup change', function(e) {
      var thisValue = $.trim($(this).val());
      if($.isNumeric(thisValue) === false) {
 
        // Strip out non-numerics characters
        newValue = thisValue.replace(/\D/g,'');
        $(this).val(newValue).trigger('change');
      }
    });
 
    // Clean-up styles
    $('select.inserted-select', thisQuestion).css({
      'max-width': '100%'
    });
    $('.with-select input:text', thisQuestion).css({
      'position': 'absolute',
      'left': '-9999em'
    });
  });
</script>



Sample survey attached:

File Attachment:

File Name: limesurvey...9-06.lss
File Size:28.08 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 7 years 2 days ago by tpartner.
The topic has been locked.
More
7 years 2 days ago #173578 by anaidgh
Tony! Thank you so much!
It's works perfect! SEriouslly, ypu save me :)

Just one, last question, is it possible to, in the same array, condicionate the numeric row (row 4) to appear based on choosed option in row 3?

Regards
The topic has been locked.
More
7 years 2 days ago #173579 by tpartner
So, you only want to show a numeric input in row 4 if a specific value is selected in row 3?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
More
7 years 2 days ago #173580 by anaidgh
That's right.
The topic has been locked.
More
7 years 2 days ago #173587 by tpartner
This script will only show the input elements in row-4 if a specific value is selected in row 3. In this case, I have set the value to "4". Modify the "showValue" variable as required.

Code:
<script type="text/javascript" charset="utf-8">
 
  $(document).on('ready pjax:scriptcomplete',function(){
    var thisQuestion = $('#question{QID}');
 
    // Insert selects into row 2
    if($('tr.subquestion-list:eq(1) .answer-item .inserted-select', thisQuestion).length == 0) {
      $('tr.subquestion-list:eq(1) .answer-item', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
        <option value="">Please choose...</option>\
        <option value="1">Yes</option>\
        <option value="2">No</option>\
        <option value="3">Do not know</option>\
      </select>');
    } 
 
    // Insert selects into row 3
    if($('tr.subquestion-list:eq(2) .answer-item .inserted-select', thisQuestion).length == 0) {
      $('tr.subquestion-list:eq(2) .answer-item', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
        <option value="">Please choose...</option>\
        <option value="1">Red</option>\
        <option value="2">Blue</option>\
        <option value="3">Pink</option>\
        <option value="4">Show row-4 input</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');
      }
    });
 
    // 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);
    });
 
    // Numeric only in row 4
    $('tr.subquestion-list:eq(3) input:text', thisQuestion).on('keyup change', function(e) {
      var thisValue = $.trim($(this).val());
      if($.isNumeric(thisValue) === false) {
 
        // Strip out non-numerics characters
        newValue = thisValue.replace(/\D/g,'');
        $(this).val(newValue);
        checkconditions($(this).val(), $(this).attr('name'), 'text');
      }
    });
 
    // Hide row-4 inputs unless a specific value selected in row 3
    var showValue = '4';
    // Listener on row-3 selects
    $('tr.subquestion-list:eq(2) select', thisQuestion).on('change', function(e) {
      var thisValue = $(this).val();
      var thisCode = $(this).closest('.answer-item').find('input:text').attr('id').split('_')[1];
      var otherInput = $('tr.subquestion-list:eq(3) .answer_cell_'+thisCode+' input:text', thisQuestion);
      if(thisValue == showValue) {
        $(otherInput).show();
      }
      else {
        $(otherInput).hide().val('');
        checkconditions($(otherInput).val(), $(otherInput).attr('name'), 'text');
      }
    });
    // Initial states of row-4 inputs
    $('tr.subquestion-list:eq(3) input:text', thisQuestion).hide();
    $('tr.subquestion-list:eq(2) .inserted-select', thisQuestion).each(function(i) {
      var thisValue = $(this).val();
      var thisCode = $(this).closest('.answer-item').find('input:text').attr('id').split('_')[1];
      var otherInput = $('tr.subquestion-list:eq(3) .answer_cell_'+thisCode+' input:text', thisQuestion);
      if(thisValue == showValue) {
        $('tr.subquestion-list:eq(3) .answer_cell_'+thisCode+' input:text', thisQuestion).show();
      }
    });
 
    // Clean-up styles
    $('select.inserted-select', thisQuestion).css({
      'max-width': '100%'
    });
    $('.with-select input:text', thisQuestion).css({
      'position': 'absolute',
      'left': '-9999em'
    });
  });
</script>

Sample survey attached:

File Attachment:

File Name: limesurvey...8863.lss
File Size:29.32 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
More
6 years 11 months ago #173660 by anaidgh
Thank you, so much, Tony.

The last question, I tried to make the same (numeric and text array) but now with columns, i.e. First column is just numeric and the second one text. So, I supposed it would be like this...

<script type="text/javascript" charset="utf-8">

$(document).on('ready pjax:scriptcomplete',function(){
var thisQuestion = $('#question{3}');
// Numerics only in row 4
$('.answer_cell_SQ001 input:text', thisQuestion).on('keyup change', function(e) {
var thisValue = $.trim($(this).val());
if($.isNumeric(thisValue) === false) {

// Strip out non-numerics characters
newValue = thisValue.replace(/\D/g,'');
$(this).val(newValue).trigger('change');
}
});
// Clean-up styles
$('select.inserted-select', thisQuestion).css({
'max-width': '100%'
});
$('.with-select input:text', thisQuestion).css({
'position': 'absolute',
'left': '-9999em'
});


// 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);
});



});

</script>
The topic has been locked.
Moderators: tpartnerholch

Lime-years ahead

Online-surveys for every purse and purpose