Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Other specify in grid

Hi,

I have to set up a grid question exactly as in the below link,

https://sawtoothsoftware.com/forum/10037/other-please-specify-in-grid?show=10037#q10037

I used the available code in the link and it works great.
But, it stops working if I show only chosen attributes from the previous question. The open end text boxes of not chosen attributes are visible at the end of the question. If those text boxes can be hidden then it will be great.

Question type is single select row.

The code I use

<div id="otherspecifys">
    <input name="FreeFormatQ_OtherSpecify1" id="FreeFormatQ_OtherSpecify1" type="text" size="20">
    <input name="FreeFormatQ_OtherSpecify2" id="FreeFormatQ_OtherSpecify2" type="text" size="20">
    <input name="FreeFormatQ_OtherSpecify3" id="FreeFormatQ_OtherSpecify3" type="text" size="20">
    <input name="FreeFormatQ_OtherSpecify4" id="FreeFormatQ_OtherSpecify4" type="text" size="20">
    <input name="FreeFormatQ_OtherSpecify5" id="FreeFormatQ_OtherSpecify5" type="text" size="20">
    <input name="FreeFormatQ_OtherSpecify6" id="FreeFormatQ_OtherSpecify6" type="text" size="20">
    <input name="FreeFormatQ_OtherSpecify7" id="FreeFormatQ_OtherSpecify7" type="text" size="20">
    <input name="FreeFormatQ_OtherSpecify8" id="FreeFormatQ_OtherSpecify8" type="text" size="20">
    <input name="FreeFormatQ_OtherSpecify9" id="FreeFormatQ_OtherSpecify9" type="text" size="20">
    <input name="FreeFormatQ_OtherSpecify10" id="FreeFormatQ_OtherSpecify10" type="text" size="20">
    <input name="FreeFormatQ_OtherSpecify11" id="FreeFormatQ_OtherSpecify11" type="text" size="20">
</div>

<script type="text/javascript">
$(document).ready(function(){
    // Add column header
    $('#Q7_div .question_body tbody .column_header_row > td:nth-last-child(2)')
    .after('<td class="col_label_cell alt_color1"><div class="grid_options">Other Specify</div></td>')
     
    // Move other specify fields
    var rows = $('#Q7_div .question_body tbody > tr').length;
    for (var row = 2; row <= rows; row++)
    {
        var os = '#otherspecifys > input:nth-child(1)';
        var lastTd = '#Q7_div .question_body tbody > tr:nth-child(' + row + ') td:nth-last-child(2)';
         
        $(lastTd).after('<td class="' + (row % 2 == 0 ? 'alt_color2' : 'alt_color1') +'" nowrap></td>');
        $(lastTd).append($(os));
    }
})
</script>
asked Jun 18 by anonymous

1 Answer

0 votes
Tried modifying your script.  Should only show the relevant inputs now, as well as working for mobile screens.  Give it a shot:

<input name="[% QuestionName() %]_OtherSpecify1" id="[% QuestionName() %]_OtherSpecify1" type="text" size="10"/>
<input name="[% QuestionName() %]_OtherSpecify2" id="[% QuestionName() %]_OtherSpecify2" type="text" size="10"/>
<input name="[% QuestionName() %]_OtherSpecify3" id="[% QuestionName() %]_OtherSpecify3" type="text" size="10"/>
<input name="[% QuestionName() %]_OtherSpecify4" id="[% QuestionName() %]_OtherSpecify4" type="text" size="10"/>

<style>
#[% QuestionName() %]_div {
    display: none;
}
</style>

<script>
$(document).ready(function(){
    // Parameters
    var gridQ = 'GridQ';
    var otherSpecifyLabel = 'Other Specify';
    
    // Run
    var rows = $('input[name="hid_row_list_' + gridQ + '"]').val().split(',');
    
    var mobileGrid = $('#' + gridQ + '_div .mobile_grid');
    if (!$(mobileGrid).length) {
        // Run desktop grid
        $('#' + gridQ + '_div .column_header_row > td:nth-last-child(2)').after('<td class="col_label_cell alt_color1"><div class="grid_options">' + otherSpecifyLabel + '</div></td>');
        for (var r = 1; r <= rows.length; r++) {
            var row = rows[r - 1];
            var altColor = 'alt_color' + (r % 2 == 0 ? 1 : 2);
            var td = $('<td class="input_cell clickable ' + altColor + '"></td>');
            $(td).append($('#[% QuestionName() %]_OtherSpecify' + row));
            $('#' + gridQ + '_div .inner_table > tbody > tr:nth-child(' + (r + 1) + ') > td:nth-last-child(2)').after($(td));
        }
    }
    
    else {
        // Run mobile grid
        for (var r = 1; r <= rows.length; r++) {
            var row = rows[r - 1];
            var newInputRow = $('<div class="input_row mobile_select clickable response_row"><div class="input_cell option_column"></div><div class="option_cell option_column"><span>' + otherSpecifyLabel + '</span></div></div>');
            $(newInputRow).find('.input_cell').append($('#[% QuestionName() %]_OtherSpecify' + row));
            $(mobileGrid).find('.mobile_grid_card:nth-child(' + r + ') .mobile_grid_options > :nth-last-child(2)').after($(newInputRow));
        }
    }
})
</script>


Be sure to update lines 1-4 as well as lines 15-16.
answered Jun 18 by Zachary Platinum Sawtooth Software, Inc. (126,675 points)
...