Hide Other Textbox Until Other Option is Clicked

Important Update to Custom Scripting

SurveyGizmo's CustomScript Action now supports the LUA programming language. Visit our NEW Lua Scripting Resources!

Legacy Custom Scripting Language Deprecation Plans 

  1. New accounts (created after October 29, 2018) will only have the option to use Lua in scripts.
  2. As of October 29, 2018 Custom Scripting Actions will default to Lua as the scripting type in the Custom Scripting Action for accounts created before this date. You will be able to switch to the Legacy Custom Scripting; though we highly encourage using Lua.
  3. In the long term, Legacy Custom Scripting Actions will be switched to read-only. The exact date on this is to be determined; we will send notifications well ahead of time.

In this tutorial we'll cover how to display an Other Textbox in a Radio Button or Checkbox question only after the associated answer option has been clicked. Many users want their survey to be as clean as possible. Only showing an other field after being clicked can help your survey seem a little cleaner and a little less daunting.

Please note that this script is compatible with multiple 'other, write in' fields in the same question.

Check it out in an example survey.

OR

Add a survey with this setup to your account!

Setup

Go to the Style tab and scroll to the bottom of the survey preview to access the link to the HTML/CSS Editor. Paste the code below at the bottom of your HTML. 

<script type="text/javascript">
    $(function() {
        var $otherLi = $('.sg-other-li');
        $otherLi.find('.sg-other').hide();

        $otherLi.parents('ul').find('li > input').change(function() {
            $option_list = $(this).parents('ul');
            $option_list.children('li.sg-other-li').each(function() {
                if ($(this).children('input').is(':checked')) {
                    $(this).find('.sg-other').show();
                } else {
                    $(this).find('.sg-other').hide();
                }
            })
        })
    });
</script>

Testing Time!

It's time to test your survey. Pull up your radio button question. You should only see your other option. Now click on the other option. Viola! Upon clicking you should see your other textbox pop up.

Considerations

This script works best if the associated question is on its own survey page. If a page reload is triggered (perhaps by an unanswered required question), the other text box will be hidden again and the respondent will be forced to re-select the answer option to show it.

Scripting and Other Custom Solutions

We’re always happy to help you debug any documented script that is used as is. That said, we do not have the resources to write scripts on demand or to debug a customized script.

If you have customization ideas that you haven't figured out how to tackle, we're happy to be a sounding board for SurveyGizmo features and functionality ideas that might meet your customization. Beyond this, you might want to consult with someone on our Programming Services Team; these folks might have the scripting chops to help you to achieve what you are looking for!