- Posts: 5
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Array (Text): more than textboxes
- elevia
- Topic Author
- Offline
- New Member
Less
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
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
7 years 8 months ago #139947
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 Array (Text): more than textboxes
Denis has a plugin for that -
framagit.org/SondagePro-LimeSurvey-plugin/arrayTextAdapt
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
- Topic Author
- Offline
- New Member
Less
More
- Posts: 5
- Thank you received: 0
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
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
7 years 8 months ago #139987
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 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.
Sample survey attached:
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:
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The following user(s) said Thank You: elevia
The topic has been locked.
- elevia
- Topic Author
- Offline
- New Member
Less
More
- Posts: 5
- Thank you received: 0
7 years 7 months ago #141129
by elevia
Replied by elevia on topic Array (Text): more than textboxes
Thanks! It works very well.
Marco
Marco
The topic has been locked.
- krosser
- Offline
- Elite Member
Less
More
- Posts: 222
- Thank you received: 10
5 years 11 months ago #169168
by krosser
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.
Any ideas how to fix this?
I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
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:
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' });
I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
Attachments:
The topic has been locked.