Welcome to the LimeSurvey Community Forum

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

Create validation for array checkbox and comment field

  • honorem
  • honorem's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
7 years 8 months ago - 7 years 8 months ago #138858 by honorem
Hi,

I'm using this javascript suggested by tpartner to append multi-comment question into the last column of an array, however, I would like to create a validation for the text field, so when the textfield contains anything the corresponding radio button will get marked automatically, the corresponding radio button will be in the penultimate column, is this possible?
Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
 
    // Identify the questions
    var thisQuestion = $('#question{QID}');
    var nextQuestion = $(thisQuestion).next('div[id^="question"]');
 
    // Hide the multi-text question
    $(nextQuestion).hide();
 
    // Add extra cells to the array rows
    $('.subquestions-list thead tr', thisQuestion).append('<th />');
    $('.subquestions-list tbody tr', thisQuestion).append('<td />');
 
    // Move the multi-text question text to the last column header cell of the array
    $('.subquestions-list thead tr th:last', thisQuestion).text($('.questiontext', nextQuestion).text());
 
    // Move the text inputs
    $('input.text', nextQuestion).each(function(i){
      $('.subquestions-list tbody tr:eq('+i+') td:last', thisQuestion).append(this);
    });
 
    // Some cleanup styles
    $('col', thisQuestion).css({
      'width': 'auto'
    });
    $('.subquestions-list tbody th, .subquestions-list tbody td', thisQuestion).css({
      'padding': '4px 10px'
    });
  });
</script>
Last edit: 7 years 8 months ago by honorem.
The topic has been locked.
  • honorem
  • honorem's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
7 years 8 months ago #138877 by honorem
Or, in fact even better would be to lock the text field until the corresponding radio button is checked, and the corresponding radio button would be the one left of the text field i.e the last one on every row.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 8 months ago - 7 years 8 months ago #138878 by tpartner
Can you attach a small sample survey containing only that group? What LS version are you using?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 7 years 8 months ago by tpartner.
The topic has been locked.
  • honorem
  • honorem's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
7 years 8 months ago #138880 by honorem

tpartner wrote: Can you attach a small sample survey containing only that group? What LS version are you using?


Sure, I have attached a sample question group of the questions, using default template, don't mind the bad formatting in columns etc ;).

So when the "if other, enter it in corresponding text box" is checked the text field box will get unlocked so you can enter anything.
I guess I would have to create a click function for that button such as it is disabled when not checked and enabled when checked, i'm think this can be done with $("#thecheckbox").prop("disabled", true); and $("#thecheckbox").prop("disabled", false); when checked and some type of click event, but i lack the knowledge..
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 8 months ago #138893 by tpartner
Please attach a survey, not a group.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • honorem
  • honorem's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
7 years 8 months ago - 7 years 8 months ago #138901 by honorem
Wops, sorry. Here's a small sample survey! 2.06+
Last edit: 7 years 8 months ago by honorem.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 8 months ago #138925 by tpartner
Yes, you can put a listener on the radio inputs to enable/disable the corresponding text inputs. Something like this (including your code):

Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
 
    // Identify the questions
    var thisQuestion = $('#question{QID}');
    var nextQuestion = $(thisQuestion).next('div[id^="question"]');
 
    // Hide the multi-text question
    $(nextQuestion).hide();
 
    // Add extra cells to the array rows
    $('.subquestions-list thead tr', thisQuestion).append('<th />');
    $('.subquestions-list tbody tr', thisQuestion).append('<td />');
 
    // Move the multi-text question text to the last column header cell of the array
    $('.subquestions-list thead tr th:last', thisQuestion).text($('.questiontext', nextQuestion).text());
 
    // Move the text inputs
    $('input.text', nextQuestion).each(function(i){
      $('.subquestions-list tbody tr:eq('+i+') td:last', thisQuestion).append(this);
    });
 
    // Some cleanup styles
    $('col', thisQuestion).css({
      'width': 'auto'
    });
    $('.subquestions-list tbody th, .subquestions-list tbody td', thisQuestion).css({
      'padding': '4px 10px'
    });  
 
    // Assign classes
    $('input.text', thisQuestion).closest('td').prev('td').find('input.radio').addClass('other-radio');
 
    // Initial states
    $('input.text', thisQuestion).prop('disabled', true);
    $('input.other-radio:checked', thisQuestion).closest('tr').find('input.text').prop('disabled', false)
 
    // Listener on the radios
    $('input.radio', thisQuestion).on('click', function(e) {
      var thisRow = $(this).closest('tr');
      if($(this).hasClass('other-radio')) {
        $('input.text', thisRow).prop('disabled', false).focus();
      }
      else {
        $('input.text', thisRow).prop('disabled', true).val('');
      }
    });
 
    // Interrupt the Next/Submit click
    $('#movenextbtn, #movesubmitbtn').on('click', function () {
      var nextOK = true;
      $('input.other-radio:checked', thisQuestion).each(function(i) {
        if($.trim($(this).closest('tr').find('input.text').val()) == '') {
          nextOK = false;
        }
      });
 
      if(nextOK == false) {
        alert('All "Other" items must have a description.');
        return false;
      }
      else { 
        $('input.text', thisQuestion).prop('disabled', false);
      }
 
    });
  });
</script>

Here is your survey back with that modification.

File Attachment:

File Name: limesurvey...5985.lss
File Size:27 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.
  • honorem
  • honorem's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
7 years 8 months ago #138935 by honorem
Really nice tpartner, thanks a lot! So it was a little bit more complicated than my initial thought with " $("#thecheckbox").prop("disabled", true); and $("#thecheckbox").prop("disabled", false); " :D
The topic has been locked.
  • honorem
  • honorem's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
7 years 6 months ago #141153 by honorem

tpartner wrote: Yes, you can put a listener on the radio inputs to enable/disable the corresponding text inputs. Something like this (including your code):

Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
 
    // Identify the questions
    var thisQuestion = $('#question{QID}');
    var nextQuestion = $(thisQuestion).next('div[id^="question"]');
 
    // Hide the multi-text question
    $(nextQuestion).hide();
 
    // Add extra cells to the array rows
    $('.subquestions-list thead tr', thisQuestion).append('<th />');
    $('.subquestions-list tbody tr', thisQuestion).append('<td />');
 
    // Move the multi-text question text to the last column header cell of the array
    $('.subquestions-list thead tr th:last', thisQuestion).text($('.questiontext', nextQuestion).text());
 
    // Move the text inputs
    $('input.text', nextQuestion).each(function(i){
      $('.subquestions-list tbody tr:eq('+i+') td:last', thisQuestion).append(this);
    });
 
    // Some cleanup styles
    $('col', thisQuestion).css({
      'width': 'auto'
    });
    $('.subquestions-list tbody th, .subquestions-list tbody td', thisQuestion).css({
      'padding': '4px 10px'
    });  
 
    // Assign classes
    $('input.text', thisQuestion).closest('td').prev('td').find('input.radio').addClass('other-radio');
 
    // Initial states
    $('input.text', thisQuestion).prop('disabled', true);
    $('input.other-radio:checked', thisQuestion).closest('tr').find('input.text').prop('disabled', false)
 
    // Listener on the radios
    $('input.radio', thisQuestion).on('click', function(e) {
      var thisRow = $(this).closest('tr');
      if($(this).hasClass('other-radio')) {
        $('input.text', thisRow).prop('disabled', false).focus();
      }
      else {
        $('input.text', thisRow).prop('disabled', true).val('');
      }
    });
 
    // Interrupt the Next/Submit click
    $('#movenextbtn, #movesubmitbtn').on('click', function () {
      var nextOK = true;
      $('input.other-radio:checked', thisQuestion).each(function(i) {
        if($.trim($(this).closest('tr').find('input.text').val()) == '') {
          nextOK = false;
        }
      });
 
      if(nextOK == false) {
        alert('All "Other" items must have a description.');
        return false;
      }
      else { 
        $('input.text', thisQuestion).prop('disabled', false);
      }
 
    });
  });
</script>

Here is your survey back with that modification.

File Attachment:

File Name: limesurvey...5985.lss
File Size:27 KB


What would the listener be if the array table is an multiple choice table instead? Thought of assigning the class 'other-radio' to input.checkbox instead of the radio button and put the listener on that instead, i.e input.checkbox. But, this is creating a listener for the whole array table and not only the "other" checkbox. Any tips?
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 6 months ago #141161 by tpartner
Why would you need that? There is already a setting for "Other" in multiple-choice questions.


Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • honorem
  • honorem's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
7 years 6 months ago - 7 years 6 months ago #141162 by honorem
Wops, sorry for not clearing out, it is question type Array (Numbers) with checkbox layout.. The listener when I changed to 'input.checkbox' listens to all of the checkboxes in the table and not only the nearest one..
Last edit: 7 years 6 months ago by honorem.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 6 months ago #141165 by tpartner
Untested, but try this for the listener:

Code:
    // Listener on the checkboxes
    $('input.checkbox.other-radio', thisQuestion).on('change', function(e) {
      var thisRow = $(this).closest('tr');
      if($(this).is(':checked')) {
        $('input.text', thisRow).prop('disabled', false).focus();
      }
      else {
        $('input.text', thisRow).prop('disabled', true).val('');
      }
    });

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