Have an idea?

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

change text box color when radio button is clicked

I have a table row with a specify other box in it.  When the respondent chooses radio button 1 or 2, I need the background color of the textbox to change.

<tr id="Q9a2_r6_row" class="grid_row6"><td class="row_label_cell alt_color1 grid_r6 Q9a2_r6" width="50%"><div class="grid_options">
Version of <b><u>Non-Adobe</u></b> software I'm using meets my needs (please specify software used) <input class="open_end_text_box text_input" name="Q9a2_r6_other" maxlength="999" id="Q9a2_r6_other" value="uiyuiyui" type="text"><input name="hid_Q9a2_r6_other" value="1,999,SPECIFY OTHER" type="hidden"></div></td><td class="input_cell clickable alt_color1 grid_r6 grid_c1 Q9a2_r6" nowrap="" width="16%"> <span class="test_label test_var_label">Q9a2_r6=1</span> <input name="Q9a2_r6" value="1" id="Q9a2_r6_1" type="radio">
</td><td class="input_cell clickable alt_color1 grid_r6 grid_c2 Q9a2_r6" nowrap="" width="16%"> <span class="test_label test_var_label">Q9a2_r6=2</span> <input name="Q9a2_r6" value="2" id="Q9a2_r6_2" type="radio">
</td><td class="input_cell clickable alt_color1 grid_r6 grid_c3 Q9a2_r6" nowrap="" width="16%"> <span class="test_label test_var_label">Q9a2_r6=3</span> <input name="Q9a2_r6" value="3" id="Q9a2_r6_3" checked="" type="radio">
</td></tr>


Does anyone have the code that will do this?

Thanks!
asked Mar 27, 2017 by jas8278 Bronze (750 points)

1 Answer

+1 vote
This script will give the other specify a cyan background when option 1 or 2 is selected:

<script>
$(document).ready(function(){
    $('input[name="Q9a2_r6"]').change(function(){
        var bgcolor;
        switch (SSI_GetValue('Q9a2_r6')) {
            case 1:
                bgcolor = '#00FFFF';
                break;
            case 2:
                bgcolor = '#00FFFF';
                break;
            case 3:
                bgcolor = 'white';
                break;
        }
        $('#Q9a2_r6_other').css('background-color', bgcolor);
    });
    $('input[name="Q9a2_r6"]').change();
})
</script>
answered Mar 27, 2017 by Zachary Platinum Sawtooth Software, Inc. (127,375 points)
Thanks Zachary!
Hi Zachary,
The code above works great when the radio button is clicked.  Is there a way to change it from 'input[name="Q9a2_r6"]' to the entire td cell?

Thanks!
Do you need to use default radio buttons for your project?  If not, you can use graphical inputs which already have this functionality built into them.  Instead of:

<input name="Q9a2_r6" value="1" id="Q9a2_r6_1" type="radio">


you would use:

[% RadioSelect(Q9a2_r6, 1) %]


Then SSI_CustomGraphicalRadiobox will trigger whether the radio or the surrounding "clickable" is clicked on.
Using default radio buttons unfortunately.
That's okay.  Just makes things a little bit trickier.  Try out using this code:

<script>
$(document).ready(function(){
    $('input[name="Q9a2_r6"]').closest('.clickable').click(function(){
        var regex = /^Q9a2_r6_([0-9]+)$/;
        var match = $(this).find('input[name="Q9a2_r6"]').attr('id').match(regex);
        var resp = Number(match[1]);
        
        var bgcolor;
        switch (resp) {
            case 1:
                bgcolor = '#00FFFF';
                break;
            case 2:
                bgcolor = '#00FFFF';
                break;
            case 3:
                bgcolor = 'white';
                break;
        }
        $('#Q9a2_r6_other').css('background-color', bgcolor);
        
        var interval = setInterval(function(){
            $('#Q9a2_r6_' + resp).prop('checked', true);
            clearInterval(interval);
        }, 100);
    });
    $('input[name="Q9a2_r6"]').change();
})
</script>
Perfect - thank you so much!
...