- Posts: 21
- Thank you received: 0
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
- Topic Author
- Offline
- Junior Member
Less
More
7 years 8 months ago - 7 years 8 months ago #138858
by honorem
Create validation for array checkbox and comment field was created 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?
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
- Topic Author
- Offline
- Junior Member
Less
More
- Posts: 21
- Thank you received: 0
7 years 8 months ago #138877
by honorem
Replied by honorem on topic Create validation for array checkbox and comment field
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10611
- Thank you received: 3690
7 years 8 months ago - 7 years 8 months ago #138878
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Create validation for array checkbox and comment field
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
- Topic Author
- Offline
- Junior Member
Less
More
- Posts: 21
- Thank you received: 0
7 years 8 months ago #138880
by honorem
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..
Replied by honorem on topic Create validation for array checkbox and comment field
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..
Attachments:
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10611
- Thank you received: 3690
7 years 8 months ago #138893
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Create validation for array checkbox and comment field
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
- Topic Author
- Offline
- Junior Member
Less
More
- Posts: 21
- Thank you received: 0
7 years 8 months ago - 7 years 8 months ago #138901
by honorem
Replied by honorem on topic Create validation for array checkbox and comment field
Wops, sorry. Here's a small sample survey! 2.06+
Attachments:
Last edit: 7 years 8 months ago by honorem.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10611
- Thank you received: 3690
7 years 8 months ago #138925
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Create validation for array checkbox and comment field
Yes, you can put a listener on the radio inputs to enable/disable the corresponding text inputs. Something like this (including your code):
Here is your survey back with that modification.
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.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The topic has been locked.
- honorem
- Topic Author
- Offline
- Junior Member
Less
More
- Posts: 21
- Thank you received: 0
7 years 8 months ago #138935
by honorem
Replied by honorem on topic Create validation for array checkbox and comment field
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); "
The topic has been locked.
- honorem
- Topic Author
- Offline
- Junior Member
Less
More
- Posts: 21
- Thank you received: 0
7 years 6 months ago #141153
by honorem
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?
Replied by honorem on topic Create validation for array checkbox and comment field
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.
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10611
- Thank you received: 3690
7 years 6 months ago #141161
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Create validation for array checkbox and comment field
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The topic has been locked.
- honorem
- Topic Author
- Offline
- Junior Member
Less
More
- Posts: 21
- Thank you received: 0
7 years 6 months ago - 7 years 6 months ago #141162
by honorem
Replied by honorem on topic Create validation for array checkbox and comment field
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10611
- Thank you received: 3690
7 years 6 months ago #141165
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Create validation for array checkbox and comment field
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.