Have an idea?

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

Trouble executing move specify fields

I'm having trouble with the moving of the specify fields in this code. Currently the text boxes all show up at the bottom of the page. I have a Grid (Q22) with 11 radio button rows and my Free Format question is Q22Other. I would love to have the Other Specify exclusive (if that's possible).

<div id="otherspecifys">
    <input name="Q22Other_Specify1" id="Q22Other_Specify1" type="text" size="20">
    <input name="Q22Other_Specify2" id="Q22Other_Specify2" type="text" size="20">
    <input name="Q22Other_Specify3" id="Q22Other_Specify3" type="text" size="20">
    <input name="Q22Other_Specify4" id="Q22Other_Specify4" type="text" size="20">
    <input name="Q22Other_Specify5" id="Q22Other_Specify5" type="text" size="20">
    <input name="Q22Other_Specify6" id="Q22Other_Specify6" type="text" size="20">
    <input name="Q22Other_Specify7" id="Q22Other_Specify7" type="text" size="20">
    <input name="Q22Other_Specify8" id="Q22Other_Specify8" type="text" size="20">
    <input name="Q22Other_Specify9" id="Q22Other_Specify9" type="text" size="20">
    <input name="Q22Other_Specify10" id="Q22Other_Specify10" type="text" size="20">
    <input name="Q22Other_Specify11" id="Q22Other_Specify11" type="text" size="20">

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

    }
})
</script>

Thanks
related to an answer for: other, please specify in grid
asked Oct 26, 2018 by anonymous

1 Answer

0 votes
That code is looking a little old.  I've touched it up here:

<div id="otherSpecifies">
    <input name="[% QuestionName() %]_Specify1" id="[% QuestionName() %]_Specify1" type="text" size="20">
    <input name="[% QuestionName() %]_Specify2" id="[% QuestionName() %]_Specify2" type="text" size="20">
    <input name="[% QuestionName() %]_Specify3" id="[% QuestionName() %]_Specify3" type="text" size="20">
    <input name="[% QuestionName() %]_Specify4" id="[% QuestionName() %]_Specify4" type="text" size="20">
    <input name="[% QuestionName() %]_Specify5" id="[% QuestionName() %]_Specify5" type="text" size="20">
    <input name="[% QuestionName() %]_Specify6" id="[% QuestionName() %]_Specify6" type="text" size="20">
    <input name="[% QuestionName() %]_Specify7" id="[% QuestionName() %]_Specify7" type="text" size="20">
    <input name="[% QuestionName() %]_Specify8" id="[% QuestionName() %]_Specify8" type="text" size="20">
    <input name="[% QuestionName() %]_Specify9" id="[% QuestionName() %]_Specify9" type="text" size="20">
    <input name="[% QuestionName() %]_Specify10" id="[% QuestionName() %]_Specify10" type="text" size="20">
    <input name="[% QuestionName() %]_Specify11" id="[% QuestionName() %]_Specify11" type="text" size="20">
</div>

<style>
#otherSpecifies {
    display: none;
}
</style>

<script>
$(document).ready(function(){
    // Parameters
    var gridQuestion = 'Q22';
    var otherSpecifyLabel = 'Other Specify';
    
    // Run
    var rows = $('input[name="hid_row_list_' + gridQuestion + '"]').val().split(',');
    
    if (!$('#' + gridQuestion + '_div .mobile_grid').length) {
        $('#' + gridQuestion + '_div .question_body tbody .column_header_row > td:last-child').after('<td class="col_label_cell alt_color1"><div class="grid_options">' + otherSpecifyLabel + '</div></td>')
        var nextAltColor = 2;
        rows.forEach(function(row){
            var os = $('#[% QuestionName() %]_Specify' + row);
            var lastTd = '#' + gridQuestion + '_r' + row + '_row > td:last-child';
            $(lastTd).after('<td class="alt_color' + nextAltColor +'" nowrap></td>');
            $(lastTd).append($(os));
            nextAltColor = (nextAltColor == 1 ? 2 : 1);
        });
    }
    
    else {
        rows.forEach(function(row){
            var os = $('#[% QuestionName() %]_Specify' + row);
            var lastDiv = '#' + gridQuestion + '_div [data-card_num="' + row + '"] .mobile_grid_options > div:last-child';
            $(lastDiv).after('<div class="mobile_select"><span>' + otherSpecifyLabel + '</span></div>');
            $(lastDiv).append($(os));
        });
    }
})
</script>


"Q22" still needs to be updated with the name of the grid question.

For exclusiveness, use this JavaScript instead on the JavaScript above:

<script>
$(document).ready(function(){
    // Parameters
    var gridQuestion = 'Q22';
    var otherSpecifyLabel = 'Other Specify';
    
    // Run
    var rows = $('input[name="hid_row_list_' + gridQuestion + '"]').val().split(',');
    
    if (!$('#' + gridQuestion + '_div .mobile_grid').length) {
        $('#' + gridQuestion + '_div .question_body tbody .column_header_row > td:last-child').after('<td class="col_label_cell alt_color1"><div class="grid_options">' + otherSpecifyLabel + '</div></td>')
        var nextAltColor = 2;
        rows.forEach(function(row){
            var os = $('#[% QuestionName() %]_Specify' + row);
            var lastTd = '#' + gridQuestion + '_r' + row + '_row > td:last-child';
            $(lastTd).after('<td class="alt_color' + nextAltColor +'" nowrap></td>');
            $(lastTd).append($(os));
            nextAltColor = (nextAltColor == 1 ? 2 : 1);
        });
    }
    
    else {
        rows.forEach(function(row){
            var os = $('#[% QuestionName() %]_Specify' + row);
            var lastDiv = '#' + gridQuestion + '_div [data-card_num="' + row + '"] .mobile_grid_options > div:last-child';
            $(lastDiv).after('<div class="mobile_select"><span>' + otherSpecifyLabel + '</span></div>');
            $(lastDiv).append($(os));
        });
    }
    
    // Exclusive
    SSI_CustomGraphicalRadiobox = function(graphicalObj, inputObj) {
        var regex = new RegExp('^' + gridQuestion + '_r([0-9]+)$');
        var match = inputObj.name.match(regex);
        if (match) {
            $('#[% QuestionName() %]_Specify' + match[1]).val('');
        }
    }
    
    $('.myOtherSpecify').keyup(function(){
        var match = this.name.match(/^[% QuestionName() %]_Specify([0-9]+)$/);
        if (match) {
            SSI_RadioReset(gridQuestion + '_r' + match[1]);
        }
    });
})
</script>
answered Oct 26, 2018 by Zachary Platinum Sawtooth Software, Inc. (120,175 points)
...