- Posts: 15
- Thank you received: 0
Ask the community, share ideas, and connect with other LimeSurvey users!
[code][color=#339933]<[/color]script[color=#339933]>[/color] $[color=#009900]([/color]document[color=#009900])[/color].[color=#660066]ready[/color][color=#009900]([/color][color=#003366]function[/color][color=#009900]([/color][color=#009900])[/color] [color=#009900]{[/color] [color=#006600]// A function to add or remove rows of an Array (Multi Flexible)(Text) question[/color] [color=#003366]function[/color] varLengthArray[color=#009900]([/color]qID[color=#009900])[/color] [color=#009900]{[/color] [color=#000066]if[/color] [color=#009900]([/color]$[color=#009900]([/color][color=#3366cc]'#question'[/color][color=#339933]+[/color]qID[color=#339933]+[/color][color=#3366cc]''[/color][color=#009900])[/color].[color=#660066]length[/color] [color=#339933]>[/color] [color=#cc0000]0[/color][color=#009900])[/color] [color=#009900]{[/color] [color=#006600]// The HTML content of the Add/Remove elements - modify as you wish[/color] [color=#003366]var[/color] addContent [color=#339933]=[/color] [color=#3366cc]'[+] add row'[/color][color=#339933];[/color] [color=#003366]var[/color] removeContent [color=#339933]=[/color] [color=#3366cc]'[-] remove row'[/color][color=#339933];[/color] [color=#006600]// Create the Add and Remove elements & insert them[/color] [color=#003366]var[/color] el1 [color=#339933]=[/color] document.[color=#660066]createElement[/color][color=#009900]([/color][color=#3366cc]'div'[/color][color=#009900])[/color][color=#339933];[/color] el1.[color=#660066]setAttribute[/color][color=#009900]([/color][color=#3366cc]'id'[/color][color=#339933],[/color][color=#3366cc]'addButton'[/color][color=#339933]+[/color]qID[color=#009900])[/color][color=#339933];[/color] el1.[color=#660066]setAttribute[/color][color=#009900]([/color][color=#3366cc]'class'[/color][color=#339933],[/color][color=#3366cc]'btn btn-primary'[/color][color=#009900])[/color][color=#339933];[/color] document.[color=#660066]body[/color].[color=#660066]appendChild[/color][color=#009900]([/color]el1[color=#009900])[/color][color=#339933];[/color] [color=#003366]var[/color] el2 [color=#339933]=[/color] document.[color=#660066]createElement[/color][color=#009900]([/color][color=#3366cc]'div'[/color][color=#009900])[/color][color=#339933];[/color] el2.[color=#660066]setAttribute[/color][color=#009900]([/color][color=#3366cc]'id'[/color][color=#339933],[/color][color=#3366cc]'removeButton'[/color][color=#339933]+[/color]qID[color=#009900])[/color][color=#339933];[/color] el2.[color=#660066]setAttribute[/color][color=#009900]([/color][color=#3366cc]'class'[/color][color=#339933],[/color][color=#3366cc]'btn btn-primary'[/color][color=#009900])[/color][color=#339933];[/color] document.[color=#660066]body[/color].[color=#660066]appendChild[/color][color=#009900]([/color]el2[color=#009900])[/color][color=#339933];[/color] [color=#006600]// Move them to after the array[/color] $[color=#009900]([/color] [color=#3366cc]'div#addButton'[/color][color=#339933]+[/color]qID [color=#009900])[/color].[color=#660066]appendTo[/color][color=#009900]([/color]$[color=#009900]([/color] [color=#3366cc]'#question'[/color] [color=#339933]+[/color] qID [color=#339933]+[/color] [color=#3366cc]' table.ls-answers'[/color] [color=#009900])[/color].[color=#660066]parent[/color][color=#009900]([/color][color=#009900])[/color][color=#009900])[/color][color=#339933];[/color] $[color=#009900]([/color] [color=#3366cc]'div#removeButton'[/color][color=#339933]+[/color]qID [color=#009900])[/color].[color=#660066]appendTo[/color][color=#009900]([/color]$[color=#009900]([/color] [color=#3366cc]'#question'[/color] [color=#339933]+[/color] qID [color=#339933]+[/color] [color=#3366cc]' table.ls-answers'[/color] [color=#009900])[/color].[color=#660066]parent[/color][color=#009900]([/color][color=#009900])[/color][color=#009900])[/color][color=#339933];[/color] [color=#006600]// Insert their HTML[/color] $[color=#009900]([/color] [color=#3366cc]'div#addButton'[/color][color=#339933]+[/color]qID [color=#009900])[/color].[color=#660066]html[/color][color=#009900]([/color] addContent [color=#009900])[/color][color=#339933];[/color] $[color=#009900]([/color] [color=#3366cc]'div#removeButton'[/color][color=#339933]+[/color]qID [color=#009900])[/color].[color=#660066]html[/color][color=#009900]([/color] removeContent [color=#009900])[/color][color=#339933];[/color] [color=#006600]// Style the elements - you can modify here if you wish[/color] $[color=#009900]([/color] [color=#3366cc]'div#addButton'[/color][color=#339933]+[/color]qID [color=#009900])[/color].[color=#660066]css[/color][color=#009900]([/color][color=#009900]{[/color] [color=#3366cc]'margin'[/color][color=#339933]:[/color][color=#3366cc]'10px 0 0 10px'[/color][color=#339933],[/color] [color=#3366cc]'padding'[/color][color=#339933]:[/color][color=#3366cc]'1px'[/color][color=#339933],[/color] [color=#3366cc]'text-align'[/color][color=#339933]:[/color][color=#3366cc]'center'[/color][color=#339933],[/color] [color=#3366cc]'width'[/color][color=#339933]:[/color][color=#3366cc]'auto'[/color][color=#339933],[/color] [color=#3366cc]'cursor'[/color][color=#339933]:[/color][color=#3366cc]'pointer'[/color][color=#339933],[/color] [color=#3366cc]'float'[/color][color=#339933]:[/color][color=#3366cc]'left'[/color] [color=#009900]}[/color][color=#009900])[/color][color=#339933];[/color] $[color=#009900]([/color] [color=#3366cc]'div#removeButton'[/color][color=#339933]+[/color]qID [color=#009900])[/color].[color=#660066]css[/color][color=#009900]([/color][color=#009900]{[/color] [color=#3366cc]'margin'[/color][color=#339933]:[/color][color=#3366cc]'10px 0 0 10px'[/color][color=#339933],[/color] [color=#3366cc]'padding'[/color][color=#339933]:[/color][color=#3366cc]'1px'[/color][color=#339933],[/color] [color=#3366cc]'text-align'[/color][color=#339933]:[/color][color=#3366cc]'center'[/color][color=#339933],[/color] [color=#3366cc]'width'[/color][color=#339933]:[/color][color=#3366cc]'auto'[/color][color=#339933],[/color] [color=#3366cc]'cursor'[/color][color=#339933]:[/color][color=#3366cc]'pointer'[/color][color=#339933],[/color] [color=#3366cc]'float'[/color][color=#339933]:[/color][color=#3366cc]'left'[/color] [color=#009900]}[/color][color=#009900])[/color][color=#339933];[/color] [color=#006600]// Initially hide the Remove element[/color] $[color=#009900]([/color] [color=#3366cc]'div#removeButton'[/color][color=#339933]+[/color]qID [color=#009900])[/color].[color=#660066]hide[/color][color=#009900]([/color][color=#009900])[/color][color=#339933];[/color] [color=#006600]// Call the functions below when clicked[/color] $[color=#009900]([/color] [color=#3366cc]'div#addButton'[/color][color=#339933]+[/color]qID [color=#009900])[/color].[color=#660066]click[/color][color=#009900]([/color][color=#003366]function[/color] [color=#009900]([/color]event[color=#009900])[/color] [color=#009900]{[/color] addRow[color=#009900]([/color]qID[color=#009900])[/color][color=#339933];[/color] [color=#009900]}[/color][color=#009900])[/color][color=#339933];[/color] $[color=#009900]([/color] [color=#3366cc]'div#removeButton'[/color][color=#339933]+[/color]qID [color=#009900])[/color].[color=#660066]click[/color][color=#009900]([/color][color=#003366]function[/color] [color=#009900]([/color]event[color=#009900])[/color] [color=#009900]{[/color] removeRow[color=#009900]([/color]qID[color=#009900])[/color][color=#339933];[/color] [color=#009900]}[/color][color=#009900])[/color][color=#339933];[/color] [color=#006600]// Function to add a row, also shows the Remove element and hides the[/color] [color=#006600]//Add element if all rows are shown[/color] [color=#003366]function[/color] addRow[color=#009900]([/color]qID[color=#009900])[/color] [color=#009900]{[/color] [color=#003366]var[/color] arrayRow [color=#339933]=[/color] [color=#3366cc]'#question'[/color] [color=#339933]+[/color] qID [color=#339933]+[/color] [color=#3366cc]' table.ls-answers tr.subquestion-list'[/color][color=#339933];[/color] [color=#003366]var[/color] rowCount [color=#339933]=[/color] $[color=#009900]([/color] arrayRow [color=#009900])[/color].[color=#660066]size[/color][color=#009900]([/color][color=#009900])[/color] [color=#339933]-[/color] [color=#cc0000]1[/color][color=#339933];[/color] $[color=#009900]([/color] arrayRow [color=#339933]+[/color] [color=#3366cc]'[name="hidden"]:first'[/color] [color=#009900])[/color].[color=#660066]attr[/color][color=#009900]([/color][color=#3366cc]'name'[/color][color=#339933],[/color] [color=#3366cc]'visible'[/color][color=#009900])[/color].[color=#660066]show[/color][color=#009900]([/color][color=#009900])[/color][color=#339933];[/color] $[color=#009900]([/color] [color=#3366cc]'div#removeButton'[/color][color=#339933]+[/color]qID [color=#009900])[/color].[color=#660066]show[/color][color=#009900]([/color][color=#009900])[/color][color=#339933];[/color] [color=#000066]if[/color] [color=#009900]([/color] $[color=#009900]([/color] arrayRow [color=#339933]+[/color] [color=#3366cc]':eq('[/color] [color=#339933]+[/color] rowCount [color=#339933]+[/color] [color=#3366cc]')'[/color] [color=#009900])[/color].[color=#660066]attr[/color][color=#009900]([/color][color=#3366cc]'name'[/color][color=#009900])[/color] [color=#339933]==[/color] [color=#3366cc]'visible'[/color] [color=#009900])[/color] [color=#009900]{[/color] $[color=#009900]([/color] [color=#3366cc]'div#addButton'[/color][color=#339933]+[/color]qID [color=#009900])[/color].[color=#660066]hide[/color][color=#009900]([/color][color=#009900])[/color][color=#339933];[/color] [color=#009900]}[/color] [color=#009900]}[/color] [color=#006600]// Function to remove a row, also clears the contents of the removed row,[/color] [color=#006600]// shows the Add element if the last row is hidden and hides the Remove[/color] [color=#006600]// element if only the first row is shown[/color] [color=#003366]function[/color] removeRow[color=#009900]([/color]qID[color=#009900])[/color] [color=#009900]{[/color] [color=#003366]var[/color] arrayRow [color=#339933]=[/color] [color=#3366cc]'#question'[/color] [color=#339933]+[/color] qID [color=#339933]+[/color] [color=#3366cc]' table.ls-answers tr.subquestion-list'[/color][color=#339933];[/color] [color=#003366]var[/color] rowCount [color=#339933]=[/color] $[color=#009900]([/color] arrayRow [color=#009900])[/color].[color=#660066]size[/color][color=#009900]([/color][color=#009900])[/color] [color=#339933]-[/color] [color=#cc0000]1[/color][color=#339933];[/color] $[color=#009900]([/color] arrayRow [color=#339933]+[/color] [color=#3366cc]'[name="visible"]:last input[type="text"]'[/color] [color=#009900])[/color].[color=#660066]val[/color][color=#009900]([/color][color=#3366cc]''[/color][color=#009900])[/color][color=#339933];[/color] $[color=#009900]([/color] arrayRow [color=#339933]+[/color] [color=#3366cc]'[name="visible"]:last'[/color] [color=#009900])[/color].[color=#660066]attr[/color][color=#009900]([/color][color=#3366cc]'name'[/color][color=#339933],[/color] [color=#3366cc]'hidden'[/color][color=#009900])[/color].[color=#660066]hide[/color][color=#009900]([/color][color=#009900])[/color][color=#339933];[/color] $[color=#009900]([/color] [color=#3366cc]'div#addButton'[/color][color=#339933]+[/color]qID [color=#009900])[/color].[color=#660066]show[/color][color=#009900]([/color][color=#009900])[/color][color=#339933];[/color] [color=#000066]if[/color] [color=#009900]([/color] $[color=#009900]([/color] arrayRow [color=#339933]+[/color] [color=#3366cc]':eq(1)'[/color] [color=#009900])[/color].[color=#660066]attr[/color][color=#009900]([/color][color=#3366cc]'name'[/color][color=#009900])[/color] [color=#339933]==[/color] [color=#3366cc]'hidden'[/color] [color=#009900])[/color] [color=#009900]{[/color] $[color=#009900]([/color] [color=#3366cc]'div#removeButton'[/color][color=#339933]+[/color]qID [color=#009900])[/color].[color=#660066]hide[/color][color=#009900]([/color][color=#009900])[/color][color=#339933];[/color] [color=#009900]}[/color] [color=#009900]}[/color] [color=#006600]// Just some initialization stuff[/color] [color=#003366]var[/color] arrayRow [color=#339933]=[/color] [color=#3366cc]'#question'[/color] [color=#339933]+[/color] qID [color=#339933]+[/color] [color=#3366cc]' table.ls-answers tr.subquestion-list'[/color][color=#339933];[/color] [color=#003366]var[/color] rowCount [color=#339933]=[/color] [color=#3366cc]''[/color][color=#339933];[/color] [color=#006600]// Initially hide all except first row or any rows with populated inputs[/color] $[color=#009900]([/color] arrayRow [color=#009900])[/color].[color=#660066]each[/color][color=#009900]([/color][color=#003366]function[/color][color=#009900]([/color]i[color=#009900])[/color] [color=#009900]{[/color] [color=#000066]if[/color] [color=#009900]([/color] i [color=#339933]>[/color] [color=#cc0000]0[/color] [color=#009900])[/color] [color=#009900]{[/color] [color=#006600]// We also need to give the hidden rows a name cause IE doesn't[/color] [color=#006600]// recognize jQuery :visible selector consistently[/color] $[color=#009900]([/color] [color=#000066]this[/color] [color=#009900])[/color].[color=#660066]attr[/color][color=#009900]([/color][color=#3366cc]'name'[/color][color=#339933],[/color] [color=#3366cc]'hidden'[/color][color=#009900])[/color].[color=#660066]hide[/color][color=#009900]([/color][color=#009900])[/color][color=#339933];[/color] $[color=#009900]([/color][color=#3366cc]'input[type=text]'[/color][color=#339933],[/color] [color=#000066]this[/color][color=#009900])[/color].[color=#660066]each[/color][color=#009900]([/color][color=#003366]function[/color][color=#009900]([/color]i[color=#009900])[/color] [color=#009900]{[/color] [color=#000066]if[/color] [color=#009900]([/color]$[color=#009900]([/color][color=#000066]this[/color][color=#009900])[/color].[color=#660066]attr[/color][color=#009900]([/color][color=#3366cc]'value'[/color][color=#009900])[/color] [color=#339933]!=[/color] [color=#3366cc]''[/color][color=#009900])[/color] [color=#009900]{[/color] $[color=#009900]([/color][color=#000066]this[/color][color=#009900])[/color].[color=#660066]parents[/color][color=#009900]([/color][color=#3366cc]'tbody:eq(0)'[/color][color=#009900])[/color].[color=#660066]attr[/color][color=#009900]([/color][color=#3366cc]'name'[/color][color=#339933],[/color] [color=#3366cc]'visible'[/color][color=#009900])[/color].[color=#660066]show[/color][color=#009900]([/color][color=#009900])[/color][color=#339933];[/color] $[color=#009900]([/color] [color=#3366cc]'div#removeButton'[/color][color=#339933]+[/color]qID [color=#009900])[/color].[color=#660066]show[/color][color=#009900]([/color][color=#009900])[/color][color=#339933];[/color] [color=#009900]}[/color] [color=#009900]}[/color][color=#009900])[/color][color=#339933];[/color] rowCount [color=#339933]=[/color] i[color=#339933];[/color] [color=#009900]}[/color] [color=#009900]}[/color][color=#009900])[/color][color=#339933];[/color] [color=#009900]}[/color] [color=#009900]}[/color] [color=#006600]// Call the function with a question ID[/color] varLengthArray[color=#009900]([/color][color=#009900]{[/color]QID[color=#009900]}[/color][color=#009900])[/color][color=#339933];[/color] [color=#009900]}[/color][color=#009900])[/color][color=#339933];[/color] [color=#339933]</[/color]script[color=#339933]>[/color]
</script> <script type="text/javascript" charset="utf-8"> $(document).on('ready pjax:scriptcomplete',function(){ var thisQuestion = $('#question{QID}'); // Add a question class thisQuestion.addClass('custom-array'); // Column-specific classes $('table.subquestion-list tr', thisQuestion).each(function(i) { $('th, td', this).each(function(i) { $(this).addClass('column-'+i); }); }); // Insert selects $('.answer-item.answer_cell_X002', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\ <option value="">...</option>\ <option value="1">Yes</option>\ <option value="2">No</option>\ <option value="99">No answer</option>\ </select>'); // Insert selects $('.answer-item.answer_cell_X004', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\ <option value="">...</option>\ <option value="1">Staff</option>\ <option value="2">Department</option>\ <option value="99">No answer</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'); } // 4th column conditional on 2nd column if($(this).closest('.answer-item').hasClass('answer_cell_X002')) { handleColumn4($(this)); } }); function handleColumn4(thisSelect) { var thisRow = $(thisSelect).closest('tr.subquestion-list'); var item4 = $('.answer_cell_X004', thisRow); var x=$(thisSelect).val(); if(x==1) { $('.inserted-select', item4).prop('disabled', false); } else { $('.inserted-select', item4).val('').prop('disabled', true); $('input:text', item4).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); // 4th column conditional on 2nd column if($(this).closest('.answer-item').hasClass('answer_cell_X002')) { handleColumn4($('select.inserted-select', thisCell)); } }); // Clean-up styles $('select.inserted-select', thisQuestion).css({ 'max-width': '100%' }); $('.with-select input:text', thisQuestion).css({ 'position': 'absolute', 'left': '-9999em' }); }); </script>