However, there is still a bit mistake.
No, it is not.
As you see the script runs when the page is loaded
$(document).ready(function() {
This means it doesn't take into account what happened before.
You have to rethink your design.
I could propose:
- Use an array text with four columns
- Preset the first column of row 1 and row 2 by an expression
- Disable these two fields
- Optionally enter a header for the "Others"
- Show the next "Other" row, if the count of the previous row is equal to 4.
Scripts:
To enter the dropdowns you have to use a different script that takes in account the used columns (no dropdown in the first column)
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
var thisQuestion = $('#question{QID}');
// Insert selects
$('.answer-item.answer_cell_X002', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
<option value="">Please choose...</option>\
<option value="1">very low</option>\
<option value="2">low</option>\
<option value="3">medium</option>\
<option value="4">good</option>\
<option value="5">very good</option>\
</select>');
$('.answer-item.answer_cell_X003', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
<option value="">Please choose...</option>\
<option value="1">very low</option>\
<option value="2">low</option>\
<option value="3">medium</option>\
<option value="4">good</option>\
<option value="5">very good</option>\
</select>');
$('.answer-item.answer_cell_X004', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
<option value="">Please choose...</option>\
<option value="1">very low</option>\
<option value="2">low</option>\
<option value="3">medium</option>\
<option value="4">good</option>\
<option value="5">very good</option>\
</select>');
// Listeners
$('.inserted-select', thisQuestion).on('change', function(i) {
if($(this).val() != '') {
$(this).closest('.answer-item').find('input:text').val($('option:selected', this).val()).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());
$('select.inserted-select', thisCell).val(inputText);
});
// Clean-up styles
$('select.inserted-select', thisQuestion).css({
'max-width': '100%'
});
$('.with-select input:text', thisQuestion).css({
'position': 'absolute',
'left': '-9999em'
});
});
</script>
To disable the two fields
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
$("#answer{SGQ}Y001_X001").prop('disabled', true);
$("#answer{SGQ}Y002_X001").prop('disabled', true);
});
</script>
To insert the additional header
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Identify this question
var thisQuestion = $('#question{QID}');
// Define the sub-heading text strings
var subHeading1 = '<span style="color:maroon;font-size:12pt;font-weight:bold">Others (optional)</span>';
var columnsLength = $('tr.subquestion-list:eq(0) > *', thisQuestion).length;
// Insert the new rows
$('tr.subquestion-list:eq(2)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading1+'</th></tr>');
// Fix up the row classes
var rowClass = 1;
$('table.subquestions-list tbody tr', thisQuestion).each(function(i) {
if($(this).hasClass('sub-header-row')) {
rowClass = 1
}
else {
rowClass++;
$(this).removeClass('array1 array2')
if(rowClass % 2 == 0) {
$(this).addClass('array2');
}
else {
$(this).addClass('array1');
}
}
});
});
</script>
And to preset the two fields
{Q2_Y001_X001='Employee 1'}
{Q2_Y002_X001='Employee 2'}
Joffm
